Tengo esta función JS que se supone que oculta inicialmente una que tiene el nombre de clase "tw" y cuando se hace clic en un botón, debería hacerlo visible. Sin embargo, cada vez que hago clic en el botón, solo cambia la visibilidad de un div. Tengo 4. ¿Cómo puedo solucionar esto?
function myFunction(){ var elms = document.getElementsByClassName("tw"); Array.from(elms).forEach((x) => { if (x.style.display === "block") { x.style.display = "none"; } else { x.style.display = "block"; } }) }https://jsfiddle.net/qm8bxryh/307/ Aquí está el violín
Copié su código en el contexto de una página muy simple (ver más abajo) y parece funcionar... Es posible que me haya perdido algo, pero ¿podría estar el problema en otra parte de su proyecto? Quizás investigarlo pieza por pieza en la consola del navegador podría ayudar.
<!DOCTYPE html> <html> <script> function myFunction(){ var elms = document.getElementsByClassName("tw"); Array.from(elms).forEach((x) => { if (x.style.display === "block") { x.style.display = "none"; } else { x.style.display = "block"; } }) } </script> <body> <button onclick="myFunction()">Click me</button> <div class="tw">1</div> <div class="tw" style="display: block;">2</div> <div class="tw">3</div> <div class="tw" style="display: block;">4</div> </body> </html>No hay un valor de visualización establecido como predeterminado, por lo que cuando intenta acceder a él en un elemento en el que nunca utilizó la visualización en css o estilo, devuelve undefined or nothing .
Es por eso que en el primer clic del botón no sucede nada si ningún elemento tiene ninguna pantalla, luego, debido a su función, todos pasan a través de la otra pantalla: bloquear y en el segundo clic en el interruptor de todos
Lo que me gusta hacer es crear una clase como displayNone
entonces en css:
.displayNone{ display:none; }luego, cuando quiera que un elemento sea invisible, déle esta clase y luego, cuando haga clic en el botón, simplemente elimine la clase y todos los elementos se volverán visibles
Así que así en tu función:
function myFunction() { var elms = document.getElementsByClassName("tw"); console.log(elms); console.log(Array.from(elms)); Array.from(elms).forEach((x) => x.classList.remove('displayNone')); // just remove the class } alternativamente, también puede usar classList.toggle('displayNone) para que cambie entre mostrar ninguno y su pantalla inicial
Seguiría diseñando en el ámbito de CSS y alternaría una clase en JS para mostrar el elemento. Además, cuando devuelve una lista de nodos usando querySelectorAll() , ya está en forma de matriz.
Agregue una clase css al CSS:
.display { display: block; } Entonces su función JS podría ser mucho más optimizada con toggle()
let elms = document.querySelectorAll(".tw"); function myFunction() { elms.forEach(el => el.classList.toggle('display')) }