...
<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?
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()">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>window.addEventListener('keydown', function(event) {
if (event.key === "q" || event.key === "Q") {
const button = this.document.getElementById('Q')
button.click()
}
})