[英]Uncaught TypeError: Cannot read property 'play' of null
誰能幫助我理解為什么我的控制台中出現此“ Uncaught TypeError：Can not read property'play'of null”錯誤？ 我正在使用google chrome，如果有幫助的話。 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>
選擇器部分不應有間距，否則將找不到所需的元素。 您還沒有對您使用的ES6參考使用正確的引號類型。 因此， ${e.keyCode}將被作為字符串而不是變量進行處理。 在這種情況下，您將要使用`而不是“。
當前格式：
const audio = document.querySelector("audio[data-key = '${e.keyCode}']");
解決的格式：
const audio = document.querySelector(\`audio[data-key="${e.keyCode}"]\`);
可能是一種更好的方法[此方法將在Firefox和IE9 +上有效]，您需要使用chrome檢查[event] .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>
未捕獲的類型錯誤：無法在 resumeVideo 讀取 null 的屬性“播放”
[英]Uncaught TypeError: Cannot read property 'play' of null at resumeVideo
未捕獲的類型錯誤：無法在 playAudio 中讀取 null 的屬性“播放”
[英]Uncaught TypeError: Cannot read property 'play' of null at playAudio
未捕獲的類型錯誤：無法讀取 null 的屬性“播放、源代碼或點擊”
[英]Uncaught TypeError: Cannot read property 'play,src, or click' of null
未捕獲的類型錯誤：無法在 playVid 讀取 null 的屬性“播放”
[英]Uncaught TypeError: Cannot read property 'play' of null at playVid
未捕獲的TypeError：無法讀取null的屬性'offsetTop'
[英]Uncaught TypeError: Cannot read property 'offsetTop' of null
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.