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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.