Solution 1 :

a few mistakes with your code

1- You forgot to close your <div> tag

2- condition is wrong if (event.keyCode == 27) && hidden = "true" { the && hidden="true" is outside bracket and also hidden="true"means you are giving hidden a new value, not asking if the value of hidden is true so you have to use == for comparisons

3- No need for 2 onkeyup functions, just use and else statement

var boxid = "div";
var hidden = "false";
window.onkeyup = function(event) {
  if (event.keyCode == 27 && hidden == "true") {
    console.log('display');
    document.getElementById(boxid).style.display = "inline";
    hidden = "false"
  } else {
    console.log('hide');
    document.getElementById(boxid).style.display = "none";
    hidden = "true"
  }
}
<center id="div">
  <div style="width: 100%;position: fixed;background: white;display: flex;justify-content: center;align-items: center;text-align: center;overflow: hidden;">
    <a href="home">
      <img src="https://www.freeiconspng.com/thumbs/homepage-icon-png/house-icon-png-white-32.png" width="35px" height="35px">
    </a>
  </div>
</center>

you can also use document.getElementById(boxid).style.visibility = "initial"; and document.getElementById(boxid).style.visibility = "hidden";

Solution 2 :

Your code is having 2 mistakes

  1. If condition is not having proper brackets.
  2. You are using assignment operator =, instead of equality check operator == for doing comparison.

Here is the correct code –

boxid = "div";
hidden = "true";
window.onkeyup = function(event) {
  if ((event.keyCode == 27) && hidden == "true") {
    document.getElementById(boxid).style.visibility = "block";
    hidden = "false"
  }
}
window.onkeyup = function(event) {
  if ((event.keyCode == 27) && hidden == "true") {
    document.getElementById(boxid).style.visibility = "hidden";
    hidden = "true"
  }
}

Also to improve your code, for hidden variable you can use boolean type as it is working as a flag value.

Below is the improved code which you can try –

boxid = "div";
hidden = true;;
window.onkeyup = function(event) {
  if ((event.keyCode == 27) && hidden ) {
    document.getElementById(boxid).style.visibility = "block";
    hidden = false
  }
}
window.onkeyup = function(event) {
  if ((event.keyCode == 27) && hidden) {
    document.getElementById(boxid).style.visibility = "hidden";
    hidden = true
  }
}

Solution 3 :

I didn’t understand much what you are trying to do, but your code has some errors, if you want to do a visibility toggle this is the code you need I think

<script>
  var boxid = "div";
  var hidden = false;

  window.addEventListener("keyup", (e) => {
    if (event.keyCode === 27) {
      document.getElementById(boxid).style.visibility = hidden ? "hidden" : "initial";
      hidden = !hidden;
    }
  })
</script>

Solution 4 :

it’s also a better practice (IMO) to have only one “keyup” event function, instead of two, like this:

boxid = "div";
hidden = true;;
window.onkeyup = function(event) {
    if (event.keyCode == 27) {    
        if (hidden) { //short version for hidden == true
            document.getElementById(boxid).style.visibility = "block";
            hidden = false;
        } else {
            document.getElementById(boxid).style.visibility = "hidden";
            hidden = true;
        }
    }
}

Solution 5 :

Here is another take of it improving on previus answers and making the code ES6 (last version of javascript). As well as some comments on the code I added.

<script>
  // Get the div element and store a reference to it in box variable
  const box = document.getElementById("div");

  window.addEventListener("keyup", (e) => {
    // if 'Esc' is pressed AND the visibility is NOT "hidden"
    if (event.keyCode === 27 && box.style.visibility !== "hidden") {
       // set visibility to "hidden"
       box.style.visibility = "hidden";
    }
  })
</script>

Not sure why but unhide was requested as well

<script>
  // Get the div element and store a reference to it in box variable
  const box = document.getElementById("div");
  // store the original visibility setting, better in case you change it in the future using html.
  let boxStateOrg = box.style.visibility;

  window.addEventListener("keyup", (e) => {
    // if 'Esc' is pressed AND the visibility is NOT "hidden"
    if (event.keyCode === 27) {
      if (box.style.visibility !== "hidden") {
        // set visibility to "hidden"
        box.style.visibility = "hidden";
      } else {
        box.style.visibility = boxStateOrg;
      }
    }
  })
</script>

Problem :

I want to make it so when someone clicks the escape key it will hide the tag. how would I do that?
Here is my current code:

boxid = "div";
hidden = "false";
window.onkeyup = function(event) {
  if (event.keyCode == 27) && hidden = "true" {
    document.getElementById(boxid).style.visibility = "block";
    hidden = "false"
  }
}
window.onkeyup = function(event) {
  if (event.keyCode == 27) && hidden = "true" {
    document.getElementById(boxid).style.visibility = "hidden";
    hidden = "true"
  }
}
<center id="div">
  <div style="width: 100%;position: fixed;background: white;display: flex;justify-content: center;align-items: center;text-align: center;overflow: hidden;">
    <a href="home">
      <img src="https://www.freeiconspng.com/thumbs/homepage-icon-png/house-icon-png-white-32.png" width="35px" height="35px">
    </a>
</center>

Thank you all for the help! i got many answers, I didn’t notice everything I did wrong, I will check the answers and see what works! Sorry if I wasn’t clear, I was just trying to hide the tag.

Comments

Comment posted by Emiel Zuurbier

Could you specify what exact part isn’t working and the errors you’re encountering?

Comment posted by David

The code is throwing syntax errors.

Comment posted by Chris G

your conditions are wrong on both

Comment posted by Logan Latham

For some reason this didn’t work, thank you though!

Comment posted by Logan Latham

didn’t work, thank you though!

Comment posted by Logan Latham

Only hides, doesn’t unhide as well.

By