css 无法在查询选择器中使用.keyCode

qyyhg6bp  于 2023-01-10  发布在  其他
关注(0)|答案(1)|浏览(124)

我尝试在javascript中使用.keyCode来选择按下的键,但每次按下键时,控制台都会打印null
下面是相关的css代码

<audio data-key="65" src="sounds\crash.mp3"></audio>
  <audio data-key="83" src="sounds\kick-bass.mp3"></audio>
  <audio data-key="68" src="sounds\snare.mp3"></audio>
  <audio data-key="70" src="sounds\tom-1.mp3"></audio>
  <audio data-key="71" src="sounds\tom-2.mp3"></audio>
  <audio data-key="72" src="sounds\tom-3.mp3"></audio>
  <audio data-key="74" src="sounds\sound-effect-thriller-1-108404.mp3"></audio>
  <audio data-key="75" src="sounds\tom-4.mp3"></audio>
  <audio data-key="76" src="sounds\flautatravessera-46420.mp3"></audio>

这是我试过的javascript代码

window.addEventListener('keydown', function(e){
    const audio=this.document.querySelector('audio[data-key="${e.keyCode}"]')
    console.log(audio);
    audio.play();
   }
   )

它在console.log(音频)中显示为空

p8h8hvxi

p8h8hvxi1#

使用反勾号分隔template literals

const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);

相关问题