Intentando hacer que un div desaparezca y reaparezca al hacer clic

Intentando hacer que un div desaparezca y reaparezca al hacer clic

Estoy tratando de crear un juego y he intentado 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 de nuevo al hacer clic 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;
}

Mostrar la mejor respuesta

Cuando configura la visualización en none, no podrá hacer clic en ella. ¿Quería ocultar el botón o el div con ID "block" en su lugar?

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 un array de ID que desea devolver 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>

Al aplicar un display:none al botón (como lo hacen su código y las otras respuestas), significa que una vez que el botón esté oculto, no habrá nada para hacer clic una vez más para mostrar el elemento. ¿Pretendía en cambio algo similar a lo siguiente que establece una propiedad visibility en lugar de mostrarla para que la animación no se restablezca cada vez?

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>

Alternativamente, para ocultar el botón en sí, la propiedad opacity podría ser más adecuada ya que el botón aún ocupa el espacio pero es simplemente invisible, por lo que se puede hacer clic una segunda vez para revelarlo.

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>

Avatar DCR

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>