Javascript 30 "Drum kit" console.log 问题
Javascript 30 "Drum kit" console.log Issue
我正在演奏 JavaScript 30,JavaScript 架子鼓的开头有问题。我完全遵循了代码,但我似乎对程序中 JavaScript 的前几行有疑问。我需要它 console.log <audio data-key="(number)" src="/sounds/(name-of-sound.wav)</audio>
,但是当我打开控制台并按下一个键而不是 <audio data-key="(number)" src="/sounds/(name-of-sound.wav)</audio>
时,我一直得到 "null",这是我的问题。
这是我的代码:
html(省略无关部分):
<div class="keys">
<div data-key="65" class="key">
<kbd>A</kbd>
<span class="sound">Fired</span>
</div>
<div data-key="83" class="key">
<kbd>S</kbd>
<span class="sound">Long</span>
</div>
<div data-key="68" class="key">
<kbd>D</kbd>
<span class="sound">Quick</span>
</div>
<div data-key="70" class="key">
<kbd>F</kbd>
<span class="sound">Wet</span>
</div>
<div data-key="71" class="key">
<kbd>G</kbd>
<span class="sound">Messy</span>
</div>
<div data-key="72" class="key">
<kbd>H</kbd>
<span class="sound">Screech</span>
</div>
<div data-key="74" class="key">
<kbd>J</kbd>
<span class="sound">b0ss</span>
</div>
<div data-key="75" class="key">
<kbd>K</kbd>
<span class="sound">Splat</span>
</div>
<div data-key="76" class="key">
<kbd>L</kbd>
<span class="sound">Quack</span>
</div>
</div>
<audio data-key="65" src="/sounds/fired.wav"></audio>
<audio data-key="83" src="/sounds/long.wav"></audio>
<audio data-key="68" src="/sounds/quick_one.wav"></audio>
<audio data-key="70" src="/sounds/wet_burst.wav"></audio>
<audio data-key="71" src="/sounds/messy.wav"></audio>
<audio data-key="72" src="/sounds/screecher.wav"></audio>
<audio data-key="74" src="/sounds/ey_b0ss.wav"></audio>
<audio data-key="75" src="/sounds/splat.wav"></audio>
<audio data-key="76" src="/sounds/quack.wav"></audio>
JavaScript:
<script>
window.addEventListener('keydown', function(e) {
const audio = document.querySelector('audio[data-
key="${e.keyCode}"]');
console.log(audio);
});
</script>
如果有人能帮我把它写成<audio data-key="(number)" src="/sounds/(name-of-sound.wav)</audio>
而不是"null,",我将不胜感激。
PS:如果有帮助,我会使用 Google Chrome 和 Brackets 文本编辑器。
您的按键位于 div 元素上,而不是音频元素。
所以它应该是这样的:
window.addEventListener('keydown', function(e) {
let selector = `div[data-key='${e.keyCode}']`;
let audio = document.querySelector(selector);
console.log(audio);
});
还要小心你的引号,如果你想将变量插入其中,那么你需要使用那些倾斜的单引号 (ES6)。
希望对您有所帮助!
我正在演奏 JavaScript 30,JavaScript 架子鼓的开头有问题。我完全遵循了代码,但我似乎对程序中 JavaScript 的前几行有疑问。我需要它 console.log <audio data-key="(number)" src="/sounds/(name-of-sound.wav)</audio>
,但是当我打开控制台并按下一个键而不是 <audio data-key="(number)" src="/sounds/(name-of-sound.wav)</audio>
时,我一直得到 "null",这是我的问题。
这是我的代码:
html(省略无关部分):
<div class="keys">
<div data-key="65" class="key">
<kbd>A</kbd>
<span class="sound">Fired</span>
</div>
<div data-key="83" class="key">
<kbd>S</kbd>
<span class="sound">Long</span>
</div>
<div data-key="68" class="key">
<kbd>D</kbd>
<span class="sound">Quick</span>
</div>
<div data-key="70" class="key">
<kbd>F</kbd>
<span class="sound">Wet</span>
</div>
<div data-key="71" class="key">
<kbd>G</kbd>
<span class="sound">Messy</span>
</div>
<div data-key="72" class="key">
<kbd>H</kbd>
<span class="sound">Screech</span>
</div>
<div data-key="74" class="key">
<kbd>J</kbd>
<span class="sound">b0ss</span>
</div>
<div data-key="75" class="key">
<kbd>K</kbd>
<span class="sound">Splat</span>
</div>
<div data-key="76" class="key">
<kbd>L</kbd>
<span class="sound">Quack</span>
</div>
</div>
<audio data-key="65" src="/sounds/fired.wav"></audio>
<audio data-key="83" src="/sounds/long.wav"></audio>
<audio data-key="68" src="/sounds/quick_one.wav"></audio>
<audio data-key="70" src="/sounds/wet_burst.wav"></audio>
<audio data-key="71" src="/sounds/messy.wav"></audio>
<audio data-key="72" src="/sounds/screecher.wav"></audio>
<audio data-key="74" src="/sounds/ey_b0ss.wav"></audio>
<audio data-key="75" src="/sounds/splat.wav"></audio>
<audio data-key="76" src="/sounds/quack.wav"></audio>
JavaScript:
<script>
window.addEventListener('keydown', function(e) {
const audio = document.querySelector('audio[data-
key="${e.keyCode}"]');
console.log(audio);
});
</script>
如果有人能帮我把它写成<audio data-key="(number)" src="/sounds/(name-of-sound.wav)</audio>
而不是"null,",我将不胜感激。
PS:如果有帮助,我会使用 Google Chrome 和 Brackets 文本编辑器。
您的按键位于 div 元素上,而不是音频元素。
所以它应该是这样的:
window.addEventListener('keydown', function(e) {
let selector = `div[data-key='${e.keyCode}']`;
let audio = document.querySelector(selector);
console.log(audio);
});
还要小心你的引号,如果你想将变量插入其中,那么你需要使用那些倾斜的单引号 (ES6)。
希望对您有所帮助!