添加click事件监听后addEventListener代码无法正常运行如何解决

问题原因 #

• 核心错误是误用querySelector方法：该方法仅返回匹配选择器的第一个DOM元素，属于单个节点对象，不支持下标索引。你写的document.querySelector(".drum")[i]实际取值为undefined，事件绑定操作本身就没有生效，点击自然不会触发音频播放。
• 潜在问题：循环中用var声明迭代变量i存在变量提升问题，如果你后续需要根据不同按钮匹配不同音频，会出现所有事件触发时都拿到循环结束后的最终i值的问题。

修复方案 #

将获取元素的方法替换为querySelectorAll，该方法会返回所有匹配选择器的DOM节点集合，支持下标索引。如果后续需要适配不同按钮的不同音频，可以将var改为let声明迭代变量，利用块级作用域隔离每次循环的i值。

基础修复代码（所有按钮播放同一音频） #

var numofDrumButton = document.querySelectorAll(".drum").length;
// 提前查询所有drum元素，避免循环内重复查询DOM提升性能
var drumButtons = document.querySelectorAll(".drum");

for (var i = 0 ; i < numofDrumButton; i++){
  drumButtons[i].addEventListener("click", function() {
     var audio = new Audio("sounds/tom-1.mp3");
     audio.play();
  });
}

扩展修复代码（不同按钮播放对应音频） #

const drumButtons = document.querySelectorAll(".drum");
// 用let声明迭代变量，利用块级作用域隔离每次循环的i值
for (let i = 0 ; i < drumButtons.length; i++){
  drumButtons[i].addEventListener("click", function() {
     // 可根据实际音频命名规则调整路径
     var audio = new Audio(`sounds/tom-${i+1}.mp3`);
     audio.play();
  });
}

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