AddEventListener is working fine for the first function but not triggering the second one, not even showing in the console.log. Please see where I'm going wrong?
<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>
Please ignore the id 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---");
});
You should take some time and read this about event listeners: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
They can not be attached to NodeLists https://developer.mozilla.org/en-US/docs/Web/API/NodeList
We can get around this by looping through the Nodes and applying an EventListener to each node.
Because you have tags you may have some side effects. I would recommend pointer-events: none or some other kind of prevention on the to stop default behavior.
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>