如何通过click event listener显示计算器按钮值？求助修复JS代码

你的代码里有三个关键问题导致无法正确获取按钮value：

1. 循环边界错误 #

for (var count = 0; count <= y; count++) 的条件有误，a.length是按钮的总数，元素索引从0开始，循环应该在count < y时停止，否则最后一次循环会访问不存在的a[y]，直接抛出Cannot read properties of undefined (reading 'addEventListener')错误。

2. 变量作用域问题 #

用var声明z会导致所有事件回调共享同一个变量，循环结束后z会变成最后一次循环的结果（甚至是undefined），点击按钮时无法正确指向当前被点击的元素。改用let或const声明z，能让每个循环迭代拥有独立的变量。

3. 事件回调的取值错误 #

Action函数里的z.target.value完全错误，z不是事件对象，你需要通过事件回调的参数（事件对象）获取目标元素，或者直接用this（事件回调中this指向触发事件的按钮元素）。

修正后的JavaScript代码 #

const a = document.querySelectorAll(".drum");
const y = a.length;
for (let count = 0; count < y; count++) {
  const z = a[count];
  z.addEventListener("click", Action);
}

function Action(event) {
  // 两种取值方式二选一即可：
  // 方式1: 使用this指向当前按钮
  const displayer = this.value;
  // 方式2: 使用事件对象的target属性
  // const displayer = event.target.value;
  alert("Button value :" + displayer);
}

额外优化建议 #

可以用更简洁的forEach遍历NodeList，彻底避免循环索引和作用域问题：

document.querySelectorAll(".drum").forEach(button => {
  button.addEventListener("click", () => {
    alert("Button value :" + button.value);
  });
});

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