Uncaught TypeError: Не удается прочитать свойство 'play' of null

Может ли кто-нибудь помочь мне понять, почему я получаю эту ошибку «Uncaught TypeError: Can not read property» play «null» в моей консоли? Я использую google chrome, если это вообще помогает. Раздел javascript находится внизу документа html.Uncaught TypeError: Не удается прочитать свойство 'play' of null

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

источник

2016-12-31 JaySnel

Где находится элемент с 'data-key = '$ {e.keyCode}''? Возможно, вы имели в виду '' audio [data-key = '"+ $ {e.keyCode} +"'] "' – RobG

@RobG после того, как попробовали его по-своему. Я получил ошибку Uncaught SyntaxError: missing) после списка аргументов. Я играл с порядком кавычек, видя, как там, по-видимому, правильное количество), с вашим и моим первоначальным способом, но продолжал получать либо «Uncaught SyntaxError: missing» после аргумента списка «ошибка», либо «Некопать TypeError: Can not read property 'play' of null "error. – JaySnel

@RobG Считаете ли вы, что что-то может быть неправильно с аудиофайлами, которые я использую? – JaySnel

Не должно быть интервалов в селекторной части, иначе нужный элемент не будет найден. Вы также не использовали правильный тип котировок для сделанной вами ссылки ES6; таким образом, ${e.keyCode} обрабатывается как строка вместо переменной. Вы хотите использовать `вместо" в этой ситуации

Текущий формат:.

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

Решенный Формат:

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

источник

2017-10-18 05:06:46 Sugarhead

Вероятно, лучший подход [этот подход будет работать на Firefox и IE9 + ] вам необходимо проверить с хромом для [событий] .key поддержки.

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

источник

2017-10-18 05:31:18

Uncaught TypeError: Не удается прочитать свойство 'play' of null

ответ

Смежные вопросы