2016-12-31 15 views
1

Kann mir jemand helfen zu verstehen, warum ich das bekomme "Uncaught TypeError: Kann Eigenschaft 'play' von Null nicht lesen" Fehler in meiner Konsole? Ich benutze Google Chrome, wenn das überhaupt hilft. Der Javascript-Abschnitt befindet sich am Ende des HTML-Dokuments.Uncaught TypeError: Kann Eigenschaft 'play' von Null nicht lesen

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

Wo ist das Element mit 'data-key = '$ {e.keyCode}'? Vielleicht meintest du "audio [data-key = '" + $ {e.keyCode} +' '] "' – RobG

+0

@RobG nachdem ich es auf deine Weise versucht habe, habe ich den Fehler Uncaught SyntaxError: missing) nach der Argumentliste erhalten. Ich habe mit der Reihenfolge der Anführungszeichen herumgespielt, um zu sehen, wie es die richtige Menge zu geben scheint), aber weiterhin den Fehler "Uncaught SyntaxError: missing) nach der Argumentliste" oder "Uncaught TypeError: Can not Lese Eigenschaft 'play' von null "Fehler. – JaySnel

+0

@RobG Glauben Sie, dass mit den Audiodateien, die ich verwende, etwas nicht in Ordnung ist? – JaySnel

Antwort

1

Im Auswahlbereich sollte kein Abstand vorhanden sein oder das gewünschte Element wird nicht gefunden. Sie haben auch nicht die richtige Art von Anführungszeichen für die von Ihnen erstellte ES6-Referenz verwendet. Daher wird ${e.keyCode} als Zeichenfolge anstelle einer Variablen verarbeitet. Sie wollen `verwenden anstelle von" in dieser Situation

Aktuelles Format:.

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

Gelöst Format:

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

Wahrscheinlich ein besserer Ansatz [Dieser Ansatz wird auf Firefox und IE9 arbeiten + ] Sie werden für [Veranstaltung] .key Unterstützung mit Chrom überprüfen müssen.

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

Verwandte Themen