如何通过循环为所有按钮批量绑定click事件监听器

问题原因 #

你写的循环存在两处核心错误：

1. 循环变量类型错误：for(var button = 0; button < buttons.length; button++)里的button是数字类型的索引计数器，不是按钮DOM对象，本身没有addEventListener方法，自然会触发报错。你需要通过buttons[button]才能拿到对应位置的按钮元素。
2. 作用域陷阱：用var声明的循环变量存在变量提升，所有事件回调共享同一个button变量，当点击事件触发时循环已经执行完毕，此时button的值为buttons.length，就算你修正了第一处错误，也取不到正确的按钮元素。

修正代码 #

推荐直接使用forEach遍历节点集合，写法更简洁，不会有作用域问题，同时可以顺便兼容CLEAR按钮的清空逻辑：

window.addEventListener("load", function() {
  const userInput = document.getElementById("user-input");
  const buttons = document.querySelectorAll("td>button");
  
  buttons.forEach(btn => {
    btn.addEventListener("click", function() {
      if (this.value === "CLEAR") {
        userInput.value = "";
      } else {
        userInput.value += this.value;
      }
      userInput.focus();
    });
  });
});

如果你想保留for循环的写法，将循环变量声明改为let即可解决作用域问题：

window.addEventListener("load", function() {
  const userInput = document.getElementById("user-input");
  const buttons = document.querySelectorAll("td>button");

  for(let i = 0; i < buttons.length; i++) {
    const currentBtn = buttons[i];
    currentBtn.addEventListener("click", function() {
      if (currentBtn.value === "CLEAR") {
        userInput.value = "";
      } else {
        userInput.value += currentBtn.value;
      }
      userInput.focus();
    });
  }
});

内容的提问来源于stack exchange，提问作者Hawkins.bp