Javascript 无法使用JS理解此DOM目标

我试图针对这些要素：

<audio data-key="65" src="sounds/clap.wav"></audio>
<audio data-key="83" src="sounds/hihat.wav"></audio>
<audio data-key="68" src="sounds/kick.wav"></audio>
<audio data-key="70" src="sounds/openhat.wav"></audio>
<audio data-key="71" src="sounds/boom.wav"></audio>
<audio data-key="72" src="sounds/ride.wav"></audio>
<audio data-key="74" src="sounds/snare.wav"></audio>
<audio data-key="75" src="sounds/tom.wav"></audio>
<audio data-key="76" src="sounds/tink.wav"></audio>

然而，当按下A键时，数据键返回Null。这是控制台所说的：

KeyboardEvent {isTrusted: true, key: "a", code: "KeyA", location: 0, 
ctrlKey: false, …}
index-START.html:65 Uncaught TypeError: Cannot read property 'play' of null
at index-START.html:65 

---

所以我知道我不工作，因为它是空的。但是我不明白为什么它是空的。

欢迎来到StackOverflow

为了正确地进行${…}替换，需要在该字符串周围使用字符串插值符号（`）：

`audio[data-key="${e.keyCode}"]`

否则，选择器查询将接收文本字符串，该字符串试图匹配数据键等于

“${e.keyCode}”

的元素。这称为“模板文字”，您可以阅读更多有关细微差别的信息

或者，您可以这样做以避免使用模板文字并坚持使用标准引号：

'audio[data-key="' + e.keyCode + '"]'

---

您在查询选择器中犯了一个小错误，没有使用文本字符串

“应该是`

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

---

现在可以工作了，谢谢！下次我会坚持标准报价！如果你想支持IE浏览器，这是个好主意。我们只在服务器（node.js）上创建文本模板，在那里我们可以控制我们使用的JavaScript版本。

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