未捕获的TypeError：无法读取null的属性“ play”
[英]Uncaught TypeError: Cannot read property 'play' of null
问题描述
Can anyone help me understand why I am getting this "Uncaught TypeError: Cannot read property 'play' of null" error in my console? 
谁能帮助我理解为什么我的控制台中出现此“ Uncaught TypeError：Can not read property'play'of null”错误？ I am using google chrome if that helps at all. 我正在使用google chrome，如果有帮助的话。 The javascript section is at the bottom of the html document. 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>
2 个解决方案
解决方案1
2 已采纳 2017-10-18 05:06:46
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; 您还没有对您使用的ES6参考使用正确的引号类型。 thus, ${e.keyCode} becomes processed as a string instead of a variable. 因此， ${e.keyCode}将被作为字符串而不是变量进行处理。 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}"]\`);
解决方案2
0 2017-10-18 05:31:18
Probably a better approach [this approach will work on Firefox and IE9+] you'll need to check with chrome for [event].key support. 可能是一种更好的方法[此方法将在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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.