如果我按“asdfghjkl”，为什么我会得到空值？

Answer 1

虽然 HTML 不区分大小写，但 JavaScript 区分大小写，并且调用

e.code

的结果是

Key<...>

。

document.addEventListener('keydown',function(e){
  const audio = document.querySelector(`audio[data-key=${e.code}]`)
  console.log(audio);
});

<div class="keys">
  <div data-key="A" class="key">
    <kbd>A</kbd>
    <span>clap</span>
  </div>
  <div data-key="S" class="key">
    <kbd>S</kbd>
    <span>hihat</span>
  </div>
  <div data-key="D" class="key">
    <kbd>D</kbd>
    <span>kick</span>
  </div>
    <div data-key="F" class="key">
    <kbd>F</kbd>
    <span>openhat</span>
  </div>
  <div data-key="G" class="key">
    <kbd>G</kbd>
    <span>boom</span>
  </div>
  <div data-key="H" class="key">
    <kbd>H</kbd>
    <span>ride</span>
  </div>
  <div data-key="J" class="key">
    <kbd>J</kbd>
    <span>snare</span>
  </div>
  <div data-key="K" class="key">
    <kbd>K</kbd>
    <span>tom</span>
  </div>
  <div data-key="L" class="key">
    <kbd>L</kbd>
    <span>tink</span>
  </div>
</div>

<audio data-key="KeyA" src="sounds/clap.wav"></audio>
<audio data-key="KeyS" src="sounds/hihat.wav"></audio>
<audio data-key="KeyD" src="sounds/kick.wav"></audio>
<audio data-key="KeyF" src="sounds/openhat.wav"></audio>
<audio data-key="KeyG" src="sounds/boom.wav"></audio>
<audio data-key="KeyH" src="sounds/ride.wav"></audio>
<audio data-key="KeyJ" src="sounds/snare.wav"></audio>
<audio data-key="KeyK" src="sounds/tom.wav"></audio>
<audio data-key="KeyL" src="sounds/tink.wav"></audio>