Question

任何人都可以帮助我理解为什么我会得到这个＆＃34; Uncaught TypeError：无法读取属性＆＃39; play＆＃39; of null＆＃34;我的控制台出错？我正在使用谷歌浏览器，如果这有帮助的话。 javascript部分位于html文档的底部。

  <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>JS Drum Kit</title>
      <link rel="stylesheet" href="Drum_Kit.css">
    </head>
    <body>


      <div class="keys">
        <div data-key="65" class="key">
          <kbd>A</kbd>
          <span class="sound">clap</span>
        </div>
        <div data-key="83" class="key">
          <kbd>S</kbd>
          <span class="sound">hihat</span>
        </div>
        <div data-key="68" class="key">
          <kbd>D</kbd>
          <span class="sound">kick</span>
        </div>
        <div data-key="70" class="key">
          <kbd>F</kbd>
          <span class="sound">openhat</span>
        </div>
        <div data-key="71" class="key">
          <kbd>G</kbd>
          <span class="sound">boom</span>
        </div>
        <div data-key="72" class="key">
          <kbd>H</kbd>
          <span class="sound">ride</span>
        </div>
        <div data-key="74" class="key">
          <kbd>J</kbd>
          <span class="sound">snare</span>
        </div>
        <div data-key="75" class="key">
          <kbd>K</kbd>
          <span class="sound">tom</span>
        </div>
        <div data-key="76" class="key">
          <kbd>L</kbd>
          <span class="sound">tink</span>
        </div>
      </div>

      <audio data-key="65" src="Crash-Cymbal-1.wav"></audio>
      <audio data-key="83" src="holy_hole.wav"></audio>
      <audio data-key="68" src="holy_heart_failure.wav"></audio>
      <audio data-key="70" src="holy_fruit_salad.wav"></audio>
      <audio data-key="71" src="holy_mashed_potatoes.wav"></audio>
      <audio data-key="72" src="holy_nightmare.wav"></audio>
      <audio data-key="74" src="holy_las_vegas.wav"></audio>
      <audio data-key="75" src="holy_caffeine.wav"></audio>
      <audio data-key="76" src="holy_alphabet.wav"></audio>

    <script>

    window.addEventListener('keydown', function(e){
      const audio = document.querySelector("audio[data-key = '${e.keyCode}']");
        if(!audio) console.log("this is not working");
        audio.play();

    });

    </script>

    </body>
    </html>

Answer 1

选择器部分中应该没有间距，否则将找不到所需的元素。您也没有使用正确的引号来表示您所做的ES6参考;因此，${e.keyCode}将被处理为字符串而不是变量。你会想要使用`而不是＆＃34;在这种情况下。

当前格式：

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

已解决的格式：

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

Answer 2

可能是一种更好的方法[这种方法适用于Firefox和IE9 +]，您需要使用chrome查看[event] .key支持。

＆＃13;

  <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>JS Drum Kit</title>
      <link rel="stylesheet" href="Drum_Kit.css">
    </head>
    <body>


      <div class="keys">
        <div data-key="65" class="key">
          <kbd>A</kbd>
          <span class="sound">clap</span>
        </div>
        <div data-key="83" class="key">
          <kbd>S</kbd>
          <span class="sound">hihat</span>
        </div>
        <div data-key="68" class="key">
          <kbd>D</kbd>
          <span class="sound">kick</span>
        </div>
        <div data-key="70" class="key">
          <kbd>F</kbd>
          <span class="sound">openhat</span>
        </div>
        <div data-key="71" class="key">
          <kbd>G</kbd>
          <span class="sound">boom</span>
        </div>
        <div data-key="72" class="key">
          <kbd>H</kbd>
          <span class="sound">ride</span>
        </div>
        <div data-key="74" class="key">
          <kbd>J</kbd>
          <span class="sound">snare</span>
        </div>
        <div data-key="75" class="key">
          <kbd>K</kbd>
          <span class="sound">tom</span>
        </div>
        <div data-key="76" class="key">
          <kbd>L</kbd>
          <span class="sound">tink</span>
        </div>
      </div>

      <audio id=a src="Crash-Cymbal-1.wav"></audio>
      <audio id=s src="holy_hole.wav"></audio>
      <audio id=d src="holy_heart_failure.wav"></audio>
      <audio id=f src="holy_fruit_salad.wav"></audio>
      <audio id=g src="holy_mashed_potatoes.wav"></audio>
      <audio id=h src="holy_nightmare.wav"></audio>
      <audio id=j src="holy_las_vegas.wav"></audio>
      <audio id=k src="holy_caffeine.wav"></audio>
      <audio id=l src="holy_alphabet.wav"></audio>

    <script>

    window.addEventListener('keydown', function(e){
        this[e.key] ? this[e.key].play() : 0;
    });

    </script>

    </body>
    </html>

＆＃13;

未捕获的TypeError：无法读取属性＆＃39; play＆＃39; null

2 个答案: