Estoy tratando de hacer un juego y he estado tratando de hacer que el botón del personaje desaparezca y vuelva a aparecer al hacer clic. Creo que las declaraciones if else son la mejor manera de hacerlo, pero probablemente esté equivocado porque soy nuevo en javascript. Logré hacerlo desaparecer pero no pude hacer que apareciera nuevamente al hacer clic en 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; } 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>Prueba esto:
<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>¿En qué vas a hacer clic para mostrar el cuadro oculto, ya que lo has hecho desaparecer?
Creé este fragmento a continuación para explicar la lógica que podría seguir para alternar entre cuadros negros visibles y ocultos, definitivamente necesita hacer clic en algo para iniciar la visibilidad de los elementos deseados, así que creé un botón para eso.
la función showElements(arr) acepta una array de identificaciones que desea traer de vuelta a la página.
.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>