I am trying to make a game and I have been trying to get the character button to disappear and reappear on click. I think the if else statements is the best way to do it but I am probably wrong because I am new to javascript. I managed to make it disappear but couldn’t make it appear again on click
html:
<body>
<div id="game">
<div id="block"></div>
<button id="character" onclick="myFunction()"></button>
</div>
<script>
function myFunction() {
if (document.getElementById("character").style.display="block" == true) {
document.getElementById("character").style.display="none";
} else {
document.getElementById("character").style.display="block";
}
}
</script>
</body>
</html>
css:
*{
padding: 0;
margin: 0;
}
#game {
margin: auto;
width: 400px;
height: 500px;
border: 1px solid black;
overflow: hidden;
}
#block {
width: 50px;
height: 500px;
background-color: black;
position: relative;
left: 400px;
animation: block 2s infinite linear;
}
@keyframes block {
0%{left: 400px;}
100%{left: -50px;}
}
#character {
height: 50px;
width: 50px;
background-color: black;
margin: auto;
top: 250px;
margin-left: 15px;
position: absolute;
display: block;
}
>Solution :
By applying a display:none to the button ( as your code and the other answers do ) means that once the button is hidden there will be nothing to click a subsequent time to unhide the element. Did you instead intend something akin to the following which sets a visibility property rather than display so that the animation is not reset each time?
document.querySelector('button#character').addEventListener('click', function(e) {
this.parentNode.querySelector('#block').classList.toggle('hidden');
});*{
padding: 0;
margin: 0;
}
#game {
margin: auto;
width: 400px;
height: 500px;
border: 1px solid black;
overflow: hidden;
}
#block {
width: 50px;
height: 500px;
background-color: black;
position: relative;
left: 400px;
animation: block 2s infinite linear;
}
@keyframes block {
0%{left: 400px;}
100%{left: -50px;}
}
#character {
height: 50px;
width: 50px;
background-color: black;
margin: auto;
top: 250px;
margin-left: 15px;
position: absolute;
display: block;
}
.hidden{visibility:hidden}
div:before{content:attr(id)}<div id="game">
<div id="block"></div>
<button id="character"></button>
</div>Alternatively to hide the button itself the opacity property might be more suitable as the button still occupies the space but is merely invisible so can be clicked a second time to reveal itself?
document.querySelector('button#character').addEventListener('click', function(e) {
this.classList.toggle('hidden');
});* {
padding: 0;
margin: 0;
}
#game {
margin: auto;
width: 400px;
height: 500px;
border: 1px solid black;
overflow: hidden;
}
#block {
width: 50px;
height: 500px;
background-color: black;
position: relative;
left: 400px;
animation: block 2s infinite linear;
}
@keyframes block {
0% {
left: 400px;
}
100% {
left: -50px;
}
}
#character {
height: 50px;
width: 50px;
background-color: black;
margin: auto;
top: 250px;
margin-left: 15px;
position: absolute;
display: block;
transition:ease-in-out all 250ms;
}
.hidden {
opacity:0
}
div:before {
content: attr(id)
}<div id="game">
<div id="block"></div>
<button id="character"></button>
</div>