多元素绑定addEventListener点击后控制台无对应输出，求解决

你的代码无法正常工作主要源于以下几个问题：

• 循环变量作用域问题：用var声明的i属于全局作用域，循环结束后i的值会变为按钮总数（7）。当点击按钮触发函数时，访问的i已经是7，导致所有条件分支都不匹配。
• 拼写错误：最后一个else if里的判断条件用了大写I，应该改为小写i。
• 冗余DOM查询：每次循环都重复调用document.querySelectorAll(".drum")，既影响性能也没必要。

修复后的代码方案 #

方案1：用let解决作用域问题（最简方案） #

将循环中的var替换为let，let会为每次循环创建独立的块级作用域变量，点击时能获取到正确的索引：

// 先缓存所有按钮，避免重复查询DOM
const drumButtons = document.querySelectorAll(".drum");

for (let i = 0; i < drumButtons.length; i++) {
  drumButtons[i].addEventListener("click", function() {
    if (i === 0) {
      console.log("Clicked w!!!");
    } else if (i === 1) {
      console.log("Clicked a!!!");
    } else if (i === 2) {
      console.log("Clicked s!!!");
    } else if (i === 3) {
      console.log("Clicked d!!!");
    } else if (i === 4) {
      console.log("Clicked j!!!");
    } else if (i === 5) {
      console.log("Clicked k!!!");
    } else if (i === 6) {
      console.log("Clicked t!!!");
    }
  });
}

方案2：用闭包保存索引（兼容旧环境） #

如果需要兼容不支持let的旧浏览器，可以通过闭包锁定每次循环的索引值：

const drumButtons = document.querySelectorAll(".drum");

for (var i = 0; i < drumButtons.length; i++) {
  // 立即执行函数创建闭包，保存当前循环的索引
  (function(index) {
    drumButtons[index].addEventListener("click", function() {
      switch(index) {
        case 0:
          console.log("Clicked w!!!");
          break;
        case 1:
          console.log("Clicked a!!!");
          break;
        case 2:
          console.log("Clicked s!!!");
          break;
        case 3:
          console.log("Clicked d!!!");
          break;
        case 4:
          console.log("Clicked j!!!");
          break;
        case 5:
          console.log("Clicked k!!!");
          break;
        case 6:
          console.log("Clicked t!!!");
          break;
      }
    });
  })(i);
}

方案3：利用元素文本内容（更优雅灵活） #

如果按钮上的文本就是w/a/s/d/j/k/t，可以直接通过元素文本内容判断，无需依赖索引，扩展性更强：

const drumButtons = document.querySelectorAll(".drum");

drumButtons.forEach(button => {
  button.addEventListener("click", function() {
    const key = this.textContent;
    console.log(`Clicked ${key}!!!`);
  });
});

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