JavaScript报Cannot read properties of undefined (reading 'addEventListener')错误如何解决

报错原因 #

• 核心错误是for循环的条件位被写为赋值操作：原代码循环条件写为i = btnsOpenModal.length，而非正确的大小判断逻辑。每次循环执行时会直接将i赋值为元素集合的总长度（你有3个按钮，这里值为3），而querySelectorAll返回的NodeList索引从0开始计数，最大有效索引为2，btnsOpenModal[3]是不存在的undefined，调用addEventListener方法自然抛出类型错误。
• 边缘触发场景：如果修正循环条件后仍出现相同报错，需检查JS执行时机：如果代码写在<head>标签内，会在DOM节点还未渲染完成时执行，querySelectorAll会拿到空的NodeList，访问对应索引的元素也会返回undefined。
• 额外潜在问题：循环中用var声明的i存在变量提升问题，后续如果有依赖索引i的逻辑会出现闭包异常，建议优先用let声明块级作用域的索引变量。

修复方案 #

方案1：修正原生for循环写法 #

const btnsOpenModal = document.querySelectorAll('.show-modal');
// 替换var为let，修正循环条件为i < 集合长度
for (let i = 0; i < btnsOpenModal.length; i++) {
  btnsOpenModal[i].addEventListener("click", function() {
    console.log("Button clicked");
  });
}

方案2：用forEach遍历（更简洁，不易出错） #

querySelectorAll返回的NodeList本身支持forEach方法，不需要手动维护索引：

const btnsOpenModal = document.querySelectorAll('.show-modal');
btnsOpenModal.forEach(btn => {
  btn.addEventListener("click", () => console.log("Button clicked"))
})

执行时机问题修复 #

如果是DOM未加载导致的报错，将逻辑包裹在DOM加载完成的回调中即可：

document.addEventListener('DOMContentLoaded', () => {
  const btnsOpenModal = document.querySelectorAll('.show-modal');
  btnsOpenModal.forEach(btn => {
    btn.addEventListener("click", () => console.log("Button clicked"))
  })
})

内容的提问来源于stack exchange，提问作者Albert Rmz