Question 36221 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to hide an <a> tag when i click a button? – Jquery

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.

Tags:

5

Answers


  1. 0

    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
  }
}
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    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;
        }
    }
}
    Login or Signup to reply.
  4. 0

    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>
    Login or Signup to reply.
  5. 0

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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search