![](/img/trans.png)
[英]Uncaught TypeError: Cannot read property 'play' of null at resumeVideo
[英]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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.