如何使用 JavaScript 添加一个调用另一个函数 onkeyup 的函数？

Question

基本上我有一个像架子鼓一样的小网站。我希望它在您单击屏幕上的元素时播放声音，然后我还希望每当我按下相应的数字键盘键时，屏幕上的元素都能够 "clicked""。

我点击它就可以播放了，我只是无法使用 onkeyup 功能。

  const sounds = document.querySelectorAll('.sound');
  const drumPads = document.querySelectorAll('.drumpadContainer');
  const keycodes =[
    49,
    50,
    51,
    52,
    53,
    54
  ]

  //Can i make sound??

  drumPads.forEach((drumpad, index) => {
    drumpad.addEventListener('click', function() {
      console.log("You clicked a button");
      sounds[index].currentTime = 0;
      sounds[index].play();
    })
    drumpad.addEventListener('onkeyup', function() {
      if (onkeyup == keycodes[index]){
        drumPads[index].click();
      }
    })

  });



})

Answer 1

keyup 处理程序应该在 window 上。它应该得到键码的索引，然后用它来得到相应元素的索引来点击。

window.addEventListener("keyup", function(e) {
    var index = keycodes.indexOf(e.keyCode);
    if (index > -1) {
        drumPads[index].click();
        e.preventDefault();
        e.stopPropagation();
    }
}

如何使用 JavaScript 添加一个调用另一个函数 onkeyup 的函数？

How do I use JavaScript to add a function that calls another function onkeyup?

javascript

arrays

audio

onkeyup