...
          <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 W A S D etc, but i cant finc a way to do that can you help me please?

CodePudding user response：

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()">

CodePudding user response：

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>

CodePudding user response：

window.addEventListener('keydown', function(event) {
    if (event.key === "q" || event.key === "Q") {
        const button = this.document.getElementById('Q')
        button.click()
    }
})