[英]My javascript function doesn't seem to be working. I can't figure out why
[英]Can't figure out why it isn't working. javascript calling data-key
因為我是Javascript初學者,所以我正在做一個小項目。 我已經在同一個問題上花費了幾個小時,但我無法弄清楚為什么它不起作用。 我寧願自己找到問題,但我想是時候尋求幫助了。
window.addEventListener('keydown', function (e) {
console.log(e);
const audio = document.querySelector('audio[data-key="${e.keyCode}"]');
console.log(audio);
/* audio.currentTime = 0;
if(!audio) return;
audio.play(); */
});
所以我只是想不出為什么我沒有在HTML中選擇數據鍵,控制台日志說音頻為null
。
這是我的HTML代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page Title</title>
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<div id="main">
<div data-key="68" class="key">
<p>Press D for Dogs</p>
</div>
<div data-key="67" class="key">
<p>Press C for Cats</p>
</div>
<div data-key="18" class="key">
<p>Press P for Pigs</p>
</div>
<div data-key="70" class="key">
<p>Press F for Frogs</p>
</div>
<div data-key="69" class="key">
<p>Press E for Elephants</p>
</div>
<div data-key="71" class="key">
<p>Press G for Goats</p>
</div>
</div>
<audio data-key="68" src="sounds/dog_x.wav"></audio>
<audio data-key="67" src="sounds/cat_y.wav"></audio>
<audio data-key="18" src="sounds/pig.wav"></audio>
<audio data-key="70" src="sounds/frog.wav"></audio>
<audio data-key="69" src="sounds/elephant.wav"></audio>
<audio data-key="71" src="sounds/goat.wav"></audio>
<script src="main.js"></script>
</body>
</html>
提前致謝。
您的查詢需要編輯:
document.querySelector('audio[data-key="${e.keyCode}"]');
有在用單引號(字符串參數擴展沒有這樣的事''
)。
像這樣連接正確的字符串
document.querySelector('audio[data-key="' + e.keyCode + '"]');
或使用模板字符串( MDN )
document.querySelector(`audio[data-key="${e.keyCode}"]`);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.