[FIXED] How to hide an <a> tag when i click a button?

Issue

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.

Solution

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";

Answered By - Chris G

Answer Checked By - Gilberto Lyons (PHPFixing Admin)