Estoy haciendo un menú móvil. Quiero cambiar de clase en . El primer paso funciona y elimina la clase 'fa-bars' y agrega 'fa-times'. Pero el segundo paso no funciona.
<div class="menuToggle"> <i id='test' class="fas fa-bars fa-2x"></i> </div> let menuActive = document.querySelectorAll('.menuToggle i') var element = document.getElementById('test'); if(element.classList.contains('fa-bars')){ function Activemenu(){ menuActive.forEach((item) => item.classList.remove('fa-bars')); this.classList.add('fa-times'); } }else if(element.classList.contains('fa-bars')){ function Activemenu(){ menuActive.forEach((item) => item.classList.remove('fa-times')); this.classList.add('fa-bars'); } } menuActive.forEach((item) => item.addEventListener('click',Activemenu));Ahí hay un par de problemas:
Está utilizando declaraciones de función dentro de los bloques if / else . Esos están estandarizados ahora en ciertas situaciones limitadas (que su código no coincide), pero es lo suficientemente complicado como para evitar el uso de declaraciones de funciones en bloques. Utilice expresiones de función asignadas a variables en su lugar.
Está utilizando una función de flecha para el controlador de eventos, pero espera que this se establezca según la forma en que se llama a la función. Las funciones de flecha no funcionan de esa manera .
Está buscando fa-bars en ambos controles classList.contains . Probablemente querías fa-times en el segundo.
Solo está vinculando el primer controlador de eventos a ese elemento. Nada actualiza el controlador cuando cambia la condición.
Y solo como nota al margen, sugeriría usar bucles for-of sobre las devoluciones de llamada forEach :
const menuActive = document.querySelectorAll(".menuToggle i"); const element = document.getElementById("test"); function activeMenuClickHandler() { if (element.classList.contains("fa-bars")) { for (const item of menuActive) { item.classList.remove("fa-bars")); } this.classList.add("fa-times"); } else if (element.classList.contains("fa-times")) { for (const item of menuActive) { item.classList.remove("fa-times")); ) this.classList.add("fa-bars"); } } for (const item of menuActive) { item.addEventListener("click", activeMenuClickHandler); }(O similar, es posible que deba hacer algunos ajustes adicionales).
Si este código solo alterna fa-bars / fa-times , puede ser más simple usar la función de classList toggle
const menuActive = document.querySelectorAll(".menuToggle i"); const element = document.getElementById("test"); function activeMenuClickHandler() { this.classList.toggle("fa-bars fa-times"); for (const item of menuActive) { item.classList.toggle("fa-bars fa-times"); } } for (const item of menuActive) { item.addEventListener("click", activeMenuClickHandler); }