JavaScript新手求助：querySelector无法选中audio的data-key元素返回null

嘿，我一眼就瞅到问题出在哪儿啦！控制台返回null是因为你的选择器字符串写法有误，导致没法正确匹配到对应的<audio>元素。

问题根源 #

你在使用模板字符串语法${e.keyCode}的时候，外层用的是双引号（"），但模板字符串必须用**反引号（`）**包裹才能让变量解析生效。原来的代码里：

const audio = document.querySelector('audio[data-key="${e.keyCode}"]');

这里的${e.keyCode}并不会被解析成对应的按键码，而是会被当作普通字符串处理，最终生成的选择器是audio[data-key="${e.keyCode}"]——这显然找不到任何元素，所以audio才会是null。

修正后的代码 #

把选择器的外层引号改成反引号就行，这样模板字符串就能正常解析变量了：

window.addEventListener('keydown', function (e) { 
  console.log(e); 
  // 用反引号包裹整个选择器，让${e.keyCode}生效
  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); 
  console.log(audio); 
  if(!audio) return; // 先判断是否找到元素，避免报错
  audio.currentTime = 0; // 重置播放位置，支持连续按键播放
  audio.play(); 
});

额外小提示 #

另外要注意，keyCode已经是浏览器标准中废弃的属性了，现在更推荐使用e.code（比如D键对应的是KeyD）或者e.key（直接返回按键字符，比如d或D），这样的代码兼容性和未来维护性会更好。如果要改用e.code，你只需要把HTML里的data-key改成对应的KeyD、KeyC等值，然后JS里的选择器改成audio[data-key="${e.code}"]就可以啦。

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