JS - 为所有与 querySelectorAll 匹配的元素添加点击事件监听器

Question

I have li elements to which I'm trying to add click events that match the querySelector : .sidebar-nav li:not(.top) . I have this code :

var sidebarItems = document.querySelectorAll(".sidebar-nav li:not(.top)");
// For each sidebar item, register a click function
for (var i = 0; i === sidebarItems.length; i++) {
  sidebarItems[i].addEventListener("click", function() {
    console.log("fromage");
  })
};

However, no event listeners are added. The firefox dev tools show nothing, and nothing logs to the console when I click an element. I checked in the JS console, sidebarItems has the correct node list.

Any help?

Answer 1

A for loop will loop for as long as the condition is true.

Your condition is i === sidebarItems.length so unless the length is 0 , it will never be true.

Loop while i is less then the length of the array-like object.

for (let i = 0; i < sidebarItems.length; i++) {