无法读取未定义的属性"Add Event Listener"

Question

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

"未捕获的TypeError:无法读取未定义的属性"addEventListener"在索引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!")
});
}

Answer 1

1. 您正在溢出列表-在此处将<=更改为<：i <= nodeList.length

2. 所有最新的浏览器(Edge<17是一个例外(都可以使用forEach：document.querySelectorAll(".set button").forEach(but => but.addEventListener(...))

3. 你最好不要循环而是委派

document.querySelector(".set").addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.tagName === "BUTTON") { // assuming buttons have no other tags inside
alert("I got clicked!");
}
});

如果您的按钮包含标签，您可以通过在测试中添加
|| tgt.parentNode.tagName==="BUTTON"来测试一个级别

Answer 2

您运行循环的次数太多了。应该是i < nodeList.length。

如果nodeList.length为3，则3在数组中具有元素：0、1和2。所以i应该从0开始，到长度-1结束。

Answer 3

尝试这种在NodeList上循环的方式，querySelectorAll返回NodeList而不是Array，

for (const button of buttons) {
button.addEventListener('click', () => {
console.log("clicked :)");
});
}

Answer 4

使用<=时，循环有一个额外的迭代nodeList.length。它应该迭代直到i<nodeList.length.

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!")
});
}