Javascript Keydown 事件处理程序无法正常工作

Question

我希望 keydown 事件触发分配给它在这台鼓机上的相应按钮内的每个音频剪辑，但由于某种原因，似乎只有活动按钮有效。 有什么想法吗？ 提前致谢！

HTML

<body>
  
  <div id='drum-machine' class='row justify-content-between'>
    
    <div id='display-1' class='cols-6'>
      <div class='row'>
        <button id='heater1' class='drum-pad'>Q
          <audio id='Q' class='clip' src='https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3'></audio>           </button>
        <button id='heater2' class='drum-pad'>W
          <audio id='W' class='clip' src='https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3' type='audio/mpeg'></audio>  
        </button>
        <button id='heater3' class='drum-pad'>E
          <audio id='E' class='clip' src='https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3' type='audio/mpeg'></audio>
        </button>
      </div>
      <div class='row'>
        <button id='heater4' class='drum-pad'>A
          <audio id='A' class='clip' src='https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3' type='audio/mpeg'></audio>  
        </button>
        <button id='clap' class='drum-pad'>S
          <audio id='S' class='clip' src='https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3' type='audio/mpeg'></audio>  
        </button>
        <button id='OHH' class='drum-pad'>D
          <audio id='D' class='clip' src='https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3' type='audio/mpeg'></audio>  
        </button>
      </div>
      <div class='row'>
        <button id='KHH' class='drum-pad'>Z
          <audio id='Z' class='clip' src='https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3'></audio>  
        </button>
        <button id='kick' class='drum-pad'>X
          <audio id='X' class='clip' src='https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3' type='audio/mpeg'></audio>  
        </button>
        <button id='CHH' class='drum-pad'>C
          <audio id='C' class='clip' src='https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3' type='audio/mpeg'></audio>  
        </button>
      </div>
    </div>
  </div>
  
  
</body>

Javascript

var pad = document.getElementsByClassName('drum-pad');

for(let i = 0; i < pad.length; i++){
  pad[i].addEventListener('keydown', function(event){
    if (pad[i].children[0].id.charCodeAt() == event.keyCode){
     pad[i].children[0].play();
     pad[i].classList.toggle('active');
    }
  })  
};

Answer 1

 var pads = document.getElementsByClassName('drum-pad'); document.addEventListener("keydown", e => { for(let i = 0; i < pads.length; i++) { pad = pads[i]; if(String.fromCharCode(e.keyCode) == pad.innerText) { pad.children[0].play(); } } });

 <div id='drum-machine' class='row justify-content-between'> <div id='display-1' class='cols-6'> <div class='row'> <button id='heater1' class='drum-pad'>Q <audio id='Q' class='clip' src='https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3'></audio> </button> <button id='heater2' class='drum-pad'>W <audio id='W' class='clip' src='https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3' type='audio/mpeg'></audio> </button> <button id='heater3' class='drum-pad'>E <audio id='E' class='clip' src='https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3' type='audio/mpeg'></audio> </button> </div> <div class='row'> <button id='heater4' class='drum-pad'>A <audio id='A' class='clip' src='https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3' type='audio/mpeg'></audio> </button> <button id='clap' class='drum-pad'>S <audio id='S' class='clip' src='https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3' type='audio/mpeg'></audio> </button> <button id='OHH' class='drum-pad'>D <audio id='D' class='clip' src='https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3' type='audio/mpeg'></audio> </button> </div> <div class='row'> <button id='KHH' class='drum-pad'>Z <audio id='Z' class='clip' src='https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3'></audio> </button> <button id='kick' class='drum-pad'>X <audio id='X' class='clip' src='https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3' type='audio/mpeg'></audio> </button> <button id='CHH' class='drum-pad'>C <audio id='C' class='clip' src='https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3' type='audio/mpeg'></audio> </button> </div> </div> </div>

您只需要检查键盘按下的字符是否与其中一个按钮中的字符相同，然后播放所述声音。 此外，您需要监听整个文档的 keydown 事件，而不仅仅是 pad 元素。 如果您有任何疑问或需要任何说明，请告诉我。

Javascript Keydown 事件处理程序无法正常工作

问题描述

1 个解决方案

解决方案1
0 2020-08-24 17:47:04

Javascript Keydown 事件处理程序无法正常工作

问题描述

1 个解决方案

解决方案1 0 2020-08-24 17:47:04

解决方案1
0 2020-08-24 17:47:04