AddEventListener funciona bien para la primera función, pero no activa la segunda, ni siquiera se muestra en el console.log . ¿Ves dónde me equivoco?
<ul id="nv"> <li class="nvItem"><a href="#">Home</a></li> <li class="nvItem"><a href="#the-story">Story</a></li> <li class="nvItem"><a href="#comic-book">Comic</a></li> <li class="nvItem"><a href="#creatures">Creatures</a></li> <li class="nvItem"><a href="#the-path">Path</a></li> <li class="nvItem"><a href="#artists">Nikal</a></li> </ul> Por favor ignore la identificación mn
const navigation = document.getElementById("nv"); const menu = document.getElementById("mn"); const navItems = document.getElementsByClassName("nvItem") menu.addEventListener("click", () => { navigation.style.setProperty("--childenNumber", navigation.children.length); navigation.classList.toggle("active"); menu.classList.toggle("active"); console.log("---Active---"); }); navItems.addEventListener("click", () => { navigation.classList.toggle("nonActive"); menu.classList.toggle("nonActive"); console.log("---Deactive---"); });Debería tomarse un tiempo y leer esto sobre los detectores de eventos: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
No se pueden adjuntar a NodeLists https://developer.mozilla.org/en-US/docs/Web/API/NodeList
Podemos evitar esto recorriendo los Nodos y aplicando un EventListener a cada nodo.
Debido a que tiene etiquetas, es posible que tenga algunos efectos secundarios. Recomendaría pointer-events: none o algún otro tipo de prevención para detener el comportamiento predeterminado.
const navigation = document.getElementById("nv"); const menu = document.getElementById("mn"); const navItems = document.getElementsByClassName("nvItem") menu.addEventListener("click", () => { navigation.style.setProperty("--childenNumber", navigation.children.length); navigation.classList.toggle("active"); menu.classList.toggle("active"); console.log("---Active---"); }); Array.from(navItems).forEach(item => { item.addEventListener("click", e => { navigation.classList.toggle("nonActive"); menu.classList.toggle("nonActive"); console.log("---Deactive---"); }); }); <div id="mn"> menu </div> <ul id="nv"> <li class="nvItem"><a href="#">Home</a></li> <li class="nvItem"><a href="#the-story">Story</a></li> <li class="nvItem"><a href="#comic-book">Comic</a></li> <li class="nvItem"><a href="#creatures">Creatures</a></li> <li class="nvItem"><a href="#the-path">Path</a></li> <li class="nvItem"><a href="#artists">Jozef</a></li> </ul>