JavaScript按钮addEventListener点击无响应 键盘keydown事件正常

按钮的click事件绑定本身没有失效，无响应是逻辑传参错误导致的：

• 点击事件回调中，你获取的是按钮的innerHTML，也就是按钮上显示的do/re/mi/fa等文本内容，把这个文本传给了音效和动画函数
• 但音效函数的switch分支全是匹配a/s/d/f这类对应键盘按键的字符，动画函数也是靠拼接这类字符生成类名找DOM元素，传入do这类值既匹配不到音效分支，也找不到对应按钮元素，自然没有任何反馈
• 代码还存在一个隐藏报错：音效函数default分支中打印的buttonInnerHTML是点击回调里的局部变量，音效函数内部访问不到这个变量，触发default分支时会直接抛出引用错误，中断逻辑执行

1. 修改点击事件回调的取值逻辑，不要取按钮文本，取按钮上绑定的对应按键类名：

// Detecting Button Press
var numberOfPianoKeyButtons = document.querySelectorAll(".key").length;
for (var i = 0; i < numberOfPianoKeyButtons; i++) {
  document.querySelectorAll(".key")[i].addEventListener("click", function () {
    // 按钮的第一个class就是对应键盘的按键字符
    var keyChar = this.classList[0];
    makeSound(keyChar);
    buttonAnimation(keyChar);
  });
}

2. 修复音效函数default分支的变量引用错误：

default: console.log(key);

修改完成后，点击按钮传入的参数和键盘事件传入的参数完全一致，音效播放、按钮按压动画都能正常触发。

内容的提问来源于stack exchange，提问作者John Cañero