无法为多个同class元素添加事件监听器，循环报错求助

你遇到的核心问题是：document.getElementsByClassName()返回的是HTMLCollection（类数组对象），它不是标准数组，既没有forEach方法，也不存在array这个属性，所以两种写法都会报错。

不需要定时器，有以下几种简单的解决方式：

1. 把类数组转成真实数组后遍历 #

方法A：使用Array.from()转换 #

document.addEventListener('readystatechange', event => {
  if (event.target.readyState === "complete") {
    let temp = document.getElementsByClassName('js-hand-button');
    Array.from(temp).forEach(element => {
      element.addEventListener("click", handButtonClick)
    });
  }
});

方法B：使用展开运算符...转换 #

document.addEventListener('readystatechange', event => {
  if (event.target.readyState === "complete") {
    let temp = document.getElementsByClassName('js-hand-button');
    [...temp].forEach(element => {
      element.addEventListener("click", handButtonClick)
    });
  }
});

方法C：直接调用数组的forEach方法 #

不用转换数组，通过call把数组的forEach方法借过来用：

document.addEventListener('readystatechange', event => {
  if (event.target.readyState === "complete") {
    let temp = document.getElementsByClassName('js-hand-button');
    Array.prototype.forEach.call(temp, element => {
      element.addEventListener("click", handButtonClick)
    });
  }
});

2. 使用普通for循环遍历（兼容性最好） #

如果需要兼容非常老的浏览器，用传统for循环更稳妥：

document.addEventListener('readystatechange', event => {
  if (event.target.readyState === "complete") {
    let temp = document.getElementsByClassName('js-hand-button');
    for (let i = 0; i < temp.length; i++) {
      temp[i].addEventListener("click", handButtonClick);
    }
  }
});

3. 更适配后续新增按钮的方案：事件委托 #

如果后续会动态新增js-hand-button类的按钮，上面的方法需要每次新增后重新绑定事件。更好的方式是用事件委托——给按钮的父元素绑定一次事件，利用事件冒泡机制处理所有按钮的点击：

document.addEventListener('readystatechange', event => {
  if (event.target.readyState === "complete") {
    // 可替换成按钮实际的父容器选择器，比body更精准
    document.body.addEventListener("click", event => {
      if (event.target.classList.contains('js-hand-button')) {
        handButtonClick.call(event.target); // 确保this指向点击的按钮
      }
    });
  }
});

这种方式不管后续新增多少按钮，都不需要再额外绑定事件，一次绑定终身有效。

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