He registrado en la consola el 'recuento' que imprime '1' cuando hago clic en el botón una vez; Sin embargo, cuando hago clic en el botón por segunda vez, el 'recuento' sigue siendo '1';
He estado atascado en esto por un tiempo (mi cerebro está frito);
<button id='btn'>Show Yourself</button> <div class='drop__down'> <span>Yay! You found me.</span> </div> body { background: url('https://wallpapercave.com/wp/wp6242088.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; z-index: 0; } .container { position: absolute; z-index: 1; width: 100%; display: flex; flex-direction: column; #btn { margin: 0 auto; width: 25%; padding: 1rem 2rem; color: black; border-radius: 0.5rem; background-color: rgba(255,255,255,0.4); backdrop-filter: blur(10px); border: none; } .drop__down { width: 25%; border: 1px solid #ccc; margin: 2rem auto 2rem auto; padding: 3rem; border-radius: 0.5rem; background-color: rgba(255,255,255,0.4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: none; } span { color: black; font-size: 1rem; } } const btn = document.querySelector('.btn'); const div = document.querySelector('.drop__down'); let count = 0; btn.addEventListener('click', function() { if (count === 0) { count += 1; div.style.display = 'none'; } else { count -= 1; div.style.display = 'block'; } });Editar: CodePen del proyecto
<button id='btn'>Show Yourself</button> ha dado id id='btn' y está tratando de leer document.querySelector('.btn'); ".btn"
"." - class "#" - id `document.querySelector('#btn');`intente # o cambie la identificación a la clase
Oye, sería genial si pudieras decirnos qué tipo de operación te gustaría hacer con esta función.
De inmediato por lo que puedo ver,
Si la variable de conteo se inicializa en 0, y cuando ocurre el evento "clic del mouse", lo contaría hasta 1. Lo que parece ser el resultado deseado.
Creo que sería bueno limpiar un poco el código para ayudarnos a ver la lógica en su código también.
Si desea tener una función que solo aumente, simplemente puede hacer esto
btn.addEventListener('click', function() { count += 1; });Espero que si hace algunos cambios significativos en el código JavaScript tal como lo hice a continuación, entonces el problema se puede solucionar ✌:
const btn = document.querySelector('#btn'); const div = document.querySelector('.drop__down'); let count = 0; btn.addEventListener('click', function() { if (count == 0) { count = 1; div.style.display = 'block'; } else { count = 0; div.style.display = 'none'; } }); #btn { padding: 2rem 3rem; color: black; border-radius: 0.5rem; background-color: rgba(255,255,255,0.4); backdrop-filter: blur(10px); } .drop__down { padding: 3rem; border-radius: 0.5rem; background-color: rgba(255,255,255,0.4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: none; } span { color: black; font-size: 1rem; } <button id='btn'>Show Yourself</button> <div class='drop__down'> <span>Yay! You found me.</span> </div>