按下某个键时如何触发按钮？

Question

          ...
          <div className="wrap">
          <div id="tiles" className="columns">
          <div id="ti">
       <button id ="Q" className='drum-pad'>Q</button>
       <button className='drum-pad'>W</button>
       <button className='drum-pad'>A</button>
       <button className='drum-pad'>S</button>
       <button className='drum-pad'>D</button>
       <button className='drum-pad'>S</button>
       <button className='drum-pad'>Z</button>
       <button className='drum-pad'>X</button>
       <button className='drum-pad'>C</button>

       </div>
       </div>
         ...

Hello i would like to triger the first button when the Q key is pressed and so on with WASD etc, but i cant finc a way to do that can you help me please?

Answer 1

What you asking for is trigger a button when you press Q key. You could directly trigger a function when Q pressed instead of triggering a button but here is the code :

 var qkey = document.getElementById("Q"); //get the button element function triggerQ(){ //trigger a click on the button qkey.click(); } function log(){ console.log("Q pressed"); //log a message on console } window.addEventListener('keydown',function(event) { //check if Q pressed if (event.key == "q"){ triggerQ(); } });

 <input type="button" id="Q" value="Q" onclick="log()">

Answer 2

You might have an handler for the keydown event that when triggered will loop through all the available .drum-pad elements and compare the typed character against each one of them clicking which one has its innerText matching the pressed key:

 /** * This part only adds a click event handler to all the .drum-pad * that will print out on console which pad was just clicked * (the event gets fired both when the button is actually clicked with mouse * ..and when the corresponding character gets pressed) */ //when the page is loaded document.addEventListener('DOMContentLoaded', () =>{ //for each element having the drum-pad class document.querySelectorAll('.drum-pad').forEach((o, i)=>{ //adds the handler for the click event for the current element in the loop o.addEventListener('click', (event)=>{ //print out on console which pad triggered the click event console.log(`Clicked Pad: ${event.target.innerText}`); }); }); }); //when the event keydown gets fired on window (the page in the browser) window.addEventListener('keydown', function(event) { //get all the elements having the drum-pad class const pads = document.querySelectorAll('.drum-pad'); //for each on of them for(let pad of pads){ //get the innerText of the current element in the loop const keypad = pad.innerText; //if the pressed key is equal to the current element in the loop if (event.key.toLowerCase() == keypad.toLowerCase()){ //toggle the active status on the current button pad.classList.toggle('active'); //fire the click event on the element pad.click(); //wait 100ms and then toggle again the active status for the current button setTimeout( ()=>{pad.classList.toggle('active')}, 100); //exit the event handler return; } } })

 button:active, button.active { box-shadow: box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24); transform: translateY(4px); }

 <button class='drum-pad'>Q</button> <button class='drum-pad'>W</button> <button class='drum-pad'>A</button> <button class='drum-pad'>S</button> <button class='drum-pad'>D</button> <button class='drum-pad'>S</button> <button class='drum-pad'>Z</button> <button class='drum-pad'>X</button> <button class='drum-pad'>C</button>