如何对 keydown 和 click 事件使用相同的函数？

Question

I'm trying to listen for two event types ( keydown and click ) and execute the same function (toggling the playing and pausing of some audio files) on both of them.

The event listener for keydown works fine but when I try to use the same function for click , nothing happens. Console logging audio is null when using click as event type.

Can anyone shed some light on this?

Please note that I'm trying to do this in vanilla JS only (my code is based on the first project of Wes Bos' Javascript 30 course).

Here's the code:

  function toggleSound(e) {
    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); 
    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
    if(!audio) return; 
    if (audio.paused) {
     audio.currentTime = 0; 
     audio.play();
     key.classList.add('playing'); 
      } else {
        audio.pause();
        key.classList.remove('playing');
      }
  };
  function removeTransition(e) {
    if(event.propertyName !== 'transform') return; 
    this.classList.remove('playing'); 
  }
  const keys = document.querySelectorAll('.key');
  keys.forEach(key => key.addEventListener('ended', removeTransition));

  window.addEventListener('keydown',  toggleSound);
  window.addEventListener('click', toggleSound);

Answer 1

you are actually adding this listener in a wrong way, when you use the following code:

window.addEventListener('click', clickSound)

You are running the clickSound method, and inside this method you are adding another listeners for each item in the keys array (which i don't know what is it, but i assume that it's an html element, since you are using addEventListener on it too)

to solve it you can remove this window.addEventListener('click', clickSound) and add the listeners for the keys itself

something like

keys.forEach(key => {
  key.addEventListener('click', e => {
    const dataKey = e.target.dataset.key;
    const audio = document.querySelector(`audio[data-key="${dataKey}"]`);

    if (!audio) return; // Just to be sure the element was found
    if (audio.paused) {
      audio.currentTime = 0;
      audio.play();
      key.classList.add('playing');
    } else {
      audio.pause();
      key.classList.remove('playing');
    }
  });
});