... <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> ...Hola, me gustaría activar el primer botón cuando se presiona la tecla Q y así sucesivamente con WASD, etc., pero no puedo encontrar una manera de hacerlo. ¿Pueden ayudarme, por favor?
Lo que pide es activar un botón cuando presiona la tecla Q. Puede activar directamente una función cuando se presiona Q en lugar de activar un botón, pero aquí está el código:
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()">Es posible que tenga un controlador para el evento keydown que, cuando se active, recorrerá todos los elementos .drum-pad disponibles y comparará el carácter escrito con cada uno de ellos haciendo clic en cuál tiene su texto interno que coincide con la tecla presionada:
/** * 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() } })