Uncaught TypeError: Cannot read property 'play' of null

Question

Can anyone help me understand why I am getting this "Uncaught TypeError: Cannot read property 'play' of null" error in my console? I am using google chrome if that helps at all. The javascript section is at the bottom of the html document.

  <!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

There should be no spacing in the selector portion or the desired element will not be found. You also did not use the right type of quotes for the ES6 reference you made; thus, ${e.keyCode} becomes processed as a string instead of a variable. You will want to use ` instead of " in this situation.

Current format:

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

Resolved format:

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

Answer 2

Probably a better approach [this approach will work on Firefox and IE9+] you'll need to check with chrome for [event].key support.

  <!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>

Uncaught TypeError: Cannot read property 'play' of null

Question

2 answers

solution1
2 ACCPTED 2017-10-18 05:06:46

solution2
0 2017-10-18 05:31:18

Uncaught TypeError: Cannot read property 'play' of null

Question

2 answers

solution1 2 ACCPTED 2017-10-18 05:06:46

solution2 0 2017-10-18 05:31:18

solution1
2 ACCPTED 2017-10-18 05:06:46

solution2
0 2017-10-18 05:31:18