Trying To Make A Div Disapear And Reapear OnClick
Question
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;
}
4 answers
solution1
0 2022-01-02 19:10:53
Try this:
<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") {
document.getElementById("character").style.display="none";
} else {
document.getElementById("character").style.display="block";
}
}
</script>
</body>
</html>
solution2
0 2022-01-02 19:19:44
What are you going to click in order to show the hidden box,since you have made it disappear?
I created this snippet below to explain the logic you could follow in order to toggle between visible and hidden black boxes,you definitely need to click something to initiate visibility for the desired elements so i created a button for that.
function showElements(arr) accepts an array of id's you want to bring them back to page.
.black-box { height: 50px; width: 50px; background-color: black; position: relative; display: block; margin:5px; float: left; }
<html> <body> <div id="game"> <div id="block"></div> <button onclick="showElements(['character','character2'])">SHOW ELEMENTS</button> <button class="black-box" id="character" onclick="hideThisElement(this)" style="display:block"></button> <button class="black-box" id="character2" onclick="hideThisElement(this)" style="display:block"></button> </div> <script defer> function hideThisElement(e){ e.style.display = "none"; } function showElements(arr){ arr.forEach(el => { let elId = document.getElementById(el) if(document.body.contains(elId)){ if(elId.style.display == "none"){ elId.style.display = "block" } } }) } </script> </body> </html>
solution3
0 ACCPTED 2022-01-02 19:25:25
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>
solution4
0 2022-01-02 19:51:46
let x = 0; document.getElementsByTagName('body')[0].addEventListener('click',function(){ let char = document.getElementById('character') if(x%2 == 0){ x++; char.classList.remove('show') char.classList.add('hide') }else{ x++ char.classList.remove('hide') char.classList.add('show') } })
.hide{ display:none; }.show{ display:block; } *{ 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; }
<body> <div id="game"> <div id="block"></div> <button id="character" class='show'></button> </div> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.