How to hide an <a> tag when i click a button?-CodePudding

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>

CodePudding user response：

Your code is having 2 mistakes

If condition is not having proper brackets.
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
  }
}

CodePudding user response：

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>

CodePudding user response：

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

CodePudding user response：

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>

CodePudding user response：

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>