使用document.querySelectorAll选择多个元素及绑定点击事件失效的问题求助

Hey there! Let's break down what's going wrong with your code and fix it step by step.

The Core Issue #

When you use document.querySelectorAll(".bttn"), it doesn't return a single DOM element—it returns a NodeList (a collection of elements). You can't directly bind an onclick event to the entire collection because the NodeList itself doesn't have an onclick property; only individual elements in the collection do. That's why your current code does nothing when you click the items.

Fix 1: Loop Through the NodeList with a for Loop #

You can iterate over each element in the NodeList and bind the click event to each one individually:

<html> 
<body> 
<div id="list"> 
<div id="item1" class="bttn">Apple</div> 
<div id="item2" class="bttn">Mango</div> 
<div id="item3" class="bttn">Banana</div> 
<div id="item4" class="bttn">Kiwi</div> 
</div> 
<style> 
.bttn{ display: flex; cursor: pointer; } 
</style> 
<script> 
var list = document.querySelectorAll(".bttn"); 
// Loop through each element in the collection
for (let i = 0; i < list.length; i++) {
  list[i].onclick = function(){ 
    this.style.background = "red"; 
  };
}
</script> 
</body> 
</html>

Fix 2: Use forEach for Cleaner Iteration #

Modern browsers support the forEach method on NodeLists, which makes the code more readable:

var list = document.querySelectorAll(".bttn"); 
list.forEach(function(item) {
  item.onclick = function() {
    this.style.background = "red";
  };
});

Note: This won't work in IE11 or older, so stick with the for loop if you need to support legacy browsers.

Fix 3: Event Delegation (More Efficient) #

If you have a lot of elements or might add/remove items dynamically later, event delegation is a better approach. Instead of binding events to each element, bind one event to their parent container and use event bubbling to target the clicked item:

<html> 
<body> 
<div id="list"> 
<div id="item1" class="bttn">Apple</div> 
<div id="item2" class="bttn">Mango</div> 
<div id="item3" class="bttn">Banana</div> 
<div id="item4" class="bttn">Kiwi</div> 
</div> 
<style> 
.bttn{ display: flex; cursor: pointer; } 
</style> 
<script> 
// Bind click event to the parent container
document.getElementById("list").onclick = function(e) {
  // Check if the clicked element has the "bttn" class
  if (e.target.classList.contains("bttn")) {
    e.target.style.background = "red";
  }
};
</script> 
</body> 
</html>

This method is more performant because it only uses one event listener instead of multiple, and it works even if you add new .bttn elements to the list later without re-binding events.

内容的提问来源于stack exchange，提问作者Shubham Singhvi