报错Cannot set properties of undefined (setting 'onclick')：传入节点仍出错

错误原因 #

报错核心是循环边界设置错误：

• document.getElementsByClassName("btn")返回包含3个元素的HTMLCollection，元素索引范围是0到2（集合长度为3）。
• 你写的循环条件是i <= btn.length，当循环执行到i = 3时，btn[3]不存在（为undefined），此时尝试给undefined设置onclick属性就会抛出Cannot set properties of undefined错误。

修复后的代码 #

JavaScript部分 #

const prdImg = document.getElementById("prdImg");
const btn = document.getElementsByClassName("btn");

// 将 <= 改为 <，避免越界访问不存在的元素
for (let i = 0; i < btn.length; i++) {
  btn[i].onclick = function () {
    prdImg.src = `image${i + 1}.png`;
    // 给bt添加let声明，避免全局变量污染
    for (let bt of btn) {
      bt.classList.remove("active");
    }
    this.classList.add("active");
  };
}

额外优化建议 #

可以用document.querySelectorAll(".btn")替代getElementsByClassName，返回的NodeList支持forEach方法，代码更简洁且可读性更强：

const prdImg = document.getElementById("prdImg");
const btns = document.querySelectorAll(".btn");

btns.forEach((btn, index) => {
  btn.addEventListener("click", function () {
    prdImg.src = `image${index + 1}.png`;
    btns.forEach(b => b.classList.remove("active"));
    this.classList.add("active");
  });
});

使用addEventListener比直接赋值onclick更灵活，支持给同一元素绑定多个事件处理函数。

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