JavaScript按钮点击音效与动效点击不生效问题排查

音效无法播放是字符串大小写不匹配导致逻辑根本没走到音频播放分支，具体问题点：

• 点击事件中通过this.innerHTML获取的按钮文本是首字母大写格式：狮子按钮拿到Lion、老鹰拿到Eagle、狼拿到Wolf、鸡拿到Chicken
• 但makeSound方法的switch分支全是全小写匹配值（"lion"/"eagle"等），大小写不一致会直接跳过所有音频播放case，走default分支打印key值，不会执行播放逻辑
• 连带问题：传入的key是首字母大写格式，buttonAnimation方法执行document.querySelector("." + currentKey)时，会查找.Lion这类不存在的选择器，按压动效实际也不会生效
• 逻辑bug：当前键盘事件直接传入event.key，普通按键按下拿到的是单个字符（比如按l键拿到"l"），根本匹配不到多字符的动物名key，键盘触发逻辑本身不符合预期。

1. 修复点击事件取值逻辑 #

不要直接取innerHTML，优先取按钮上挂载的动物类名，避免文本格式变动导致匹配失败：

// 点击事件回调内替换原有取值逻辑
var animalType = this.classList.value.replace('animal ', '').trim();
makeSound(animalType);
buttonAnimation(animalType);

如果要保留innerHTML取值写法，统一转小写即可：

var buttonInnerHTML = this.innerHTML.toLowerCase();

2. 修复键盘事件触发逻辑 #

先定义按键和动物的映射关系，约定好每个动物对应的触发按键，只响应映射表内的按键：

// 可自行修改按键对应关系，后续新增动物直接加字段即可
const keyMap = {
  'l': 'lion',
  'e': 'eagle',
  'w': 'wolf',
  'c': 'chicken'
}

document.addEventListener("keypress",function(event){
  var key = event.key.toLowerCase();
  if(keyMap[key]) {
    makeSound(keyMap[key]);
    buttonAnimation(keyMap[key]);
  }
});

3. 增加容错逻辑避免报错 #

给按钮动画方法加元素存在判断，避免未开发完的四个按钮误触发时脚本报错；给音频播放方法加catch捕获加载异常，方便排查问题：

function buttonAnimation(currentKey) {
  var activeButton = document.querySelector("." + currentKey);
  if(!activeButton) return; // 元素不存在直接退出
  activeButton.classList.add("pressed");
  setTimeout(function() {
    activeButton.classList.remove("pressed");
  }, 100);
}

4. 补充按压动效样式 #

当前CSS没有定义.pressed类的按压效果，修复逻辑后可自行补充样式：

.pressed {
  opacity: 0.7;
  transform: scale(0.95);
  box-shadow: 10px 10px 20px rgba(0,0,0,0.3) !important;
}

var numberofAnimals = document.querySelectorAll(".animal").length;
const keyMap = {
  'l': 'lion',
  'e': 'eagle',
  'w': 'wolf',
  'c': 'chicken'
}

for (var i = 0; i < numberofAnimals; i++) {
  document.querySelectorAll(".animal")[i].addEventListener("click", function() {
    var animalType = this.classList.value.replace('animal ', '').trim();
    makeSound(animalType);
    buttonAnimation(animalType);
  });
}

document.addEventListener("keypress",function(event){
  var key = event.key.toLowerCase();
  if(keyMap[key]) {
    makeSound(keyMap[key]);
    buttonAnimation(keyMap[key]);
  }
});

function makeSound(key) {
  switch (key) {
    case "lion":
      var lion = new Audio("sounds/lion.mp3");
      lion.play().catch(err => console.log("音频加载失败:", err));
      break;
    case "eagle":
      var eagle = new Audio("sounds/eagle.mp3");
      eagle.play().catch(err => console.log("音频加载失败:", err));
      break;
    case "wolf":
      var wolf = new Audio("sounds/wolf.mp3");
      wolf.play().catch(err => console.log("音频加载失败:", err));
      break;
    case "chicken":
      var chicken = new Audio("sounds/chicken.mp3");
      chicken.play().catch(err => console.log("音频加载失败:", err));
      break;
    // 后续补充音频资源后放开注释即可
    // case "cheetah":
    //   var cheetah = new Audio("sounds/cheetah.mp3");
    //   cheetah.play();
    //   break;
    // case "mockingbird":
    //   var mockingbird = new Audio("sounds/mockingbird.mp3");
    //   mockingbird.play();
    //   break;
    // case "giraffe":
    //   var giraffe = new Audio("sounds/giraffe.mp3");
    //   giraffe.play();
    //   break;
    // case "elephant":
    //   var elephant = new Audio("sounds/elephant.mp3");
    //   elephant.play();
    //   break;
    default: console.log("未匹配到对应动物:", key);
  }
}

function buttonAnimation(currentKey) {
  var activeButton = document.querySelector("." + currentKey);
  if(!activeButton) return;
  activeButton.classList.add("pressed");
  setTimeout(function() {
    activeButton.classList.remove("pressed");
  }, 100);
}

注：现代浏览器限制音频必须在用户主动交互场景下才能播放，你当前绑定的点击、键盘事件都符合策略要求，只要静态资源路径正确，修复大小写匹配问题后即可正常播放。

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