No tengo conocimiento de js, pero estoy tratando de agregar una clase a un div cuando se hace clic en cualquier punto de la pantalla. tengo este html
<div class="container"> <div class="box"></div> </div>Y necesito agregar la clase al contenedor cuando se hace clic en cualquier punto de la pantalla.
Probé este js
<script> let button = document.querySelector('.container'); button.addEventListener('click', function() { button.classList.add('.hide'); }); </script>pero no funciona, la clase no se aplica. ¿Qué estoy haciendo mal?
Hay un pequeño error de sintaxis: la clase debe mencionarse sin el prefijo de punto:
button.classList.add('hide'); let button = document.querySelector('.container'); button.addEventListener('click', function() { button.classList.add('hide'); }); .container { background-color: #ddd; cursor: pointer; } .box { background-color: #ccf; margin: 1rem; } .hide { opacity: 0; transition: opacity .5s ease-in-out; } <div class="container"> <br> <div class="box">Click anywhere in the grey container to hide it</div> <br> </div>