使用JavaScript的.keyCode结合querySelector选元素失败，控制台输出null

问题根源 #

你的代码存在两个关键错误，导致无法匹配到目标audio元素：

1. 模板字符串语法错误：你用单引号包裹了选择器，使得${e.keyCode}没有被解析为实际的按键码，而是作为固定字符串传递给querySelector，自然找不到对应元素。
2. 冗余的上下文引用：this.document属于多余写法，直接使用document即可完成DOM查询，避免不必要的上下文混淆。

修复后的代码 #

JavaScript代码：

window.addEventListener('keydown', function(e) {
  // 用反引号包裹模板字符串，正确解析按键码变量
  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
  console.log(audio);
  // 先判断元素存在再执行播放，避免报错
  if (audio) {
    audio.play();
  }
});

额外优化建议 #

• 替换废弃API：keyCode是已废弃的API，建议使用更标准的e.code（如按键标识KeyA）或e.key（如按键字符a）。若适配该方案，可将HTML的data-key改为对应字符（如data-key="a"），JS代码调整为document.querySelector(audio[data-key="${e.key.toLowerCase()}"])，兼容性更强。
• 音频重置逻辑：连续按同一按键时，需重置音频播放位置才能重复触发播放，可在play()前添加audio.currentTime = 0;。

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