Javascript 无法读取属性"；添加事件侦听器"；未定义的

我设法做了一个for循环，这样我就可以在一个div中选择我的所有按钮，并为它们附加一个事件侦听器。尽管网站上的一切正常，但我在控制台中收到一个错误：

“未捕获的TypeError:无法读取未定义的属性'addEventListener' 在index.js:5“

我能设法纠正这个错误吗

以下是我在js中的代码：

let div = document.querySelector(".set");
let nodeList = div.querySelectorAll("button");

for (let i = 0; i <= nodeList.length; i++){
  nodeList[i].addEventListener("click", function(){
  alert("I got clicked!")
  });
}

let div=document.querySelector（“.set”）；
让nodeList=div.queryselectoral（“按钮”）；
for（设i=0；i循环在使用
您正在超出列表-更改
您正在运行循环的次数太多。循环应该是
i

如果
nodeList.length
为3，则数组中有3个元素：0、1和2。因此
i
应以0开始，以长度-1结束。
尝试这种在nodeList上循环的方法，您的查询选择器将返回nodeList而不是数组


for（按钮中的常量按钮）{
按钮。addEventListener（'单击'，（）=>{
console.log（“单击：）”；
});
}
i在控制台中，什么是
div
？什么是节点列表？也许有一个你不知道的iframe把你的浏览器控制台和DOM分开了。我想这种方法是错误的。@RobG补充了解释，而不是在每个子按钮上设置事件侦听器，您可以在父按钮上设置，并使用事件冒泡从子按钮组件捕获数据。不，这一点都不不同。您可以使用normal for循环在节点列表上循环，而使用length循环和其他任何内容。您也可以使用最新浏览器中的forEach hanks@mplungjan让我知道，我仍在学习我将更新答案，除非按钮中有跨度或其他元素，并且点击来自于此…；-）@RobG为parentNodeIt增加了一个测试，它是双向的，第二个更好。将来一定要记住这一点。谢谢。@Vukasin也要注意RobG说的话-我为此添加了一个修复程序不幸的是，没有页面刷新，Stackoverflow不会更新。因此，自从我开始写我的答案后，我看不到答案被添加了。当每个人都试图同时回答新问题时，这是很常见的。也没有人费心向Op解释，为什么它们会溢出阵列。
let div = document.querySelector(".set");
let nodeList = div.querySelectorAll("button");

for (let i = 0; i < nodeList.length; i++){
  nodeList[i].addEventListener("click", function(){
  alert("I got clicked!")
  });
}