Good day,
I am trying to console.log the innerHTML element when you press a keyboard.
After doing some research find out that the keypress has been deprecated. I need help in the Sense that i wouldn’t need to click before the keypress event trigger the function.
var nbreOfDrum = document.querySelectorAll(".drum");
console.log(nbreOfDrum.length);
for (var i = 0; i < nbreOfDrum.length; i++) {
document.querySelectorAll(".drum")[i].addEventListener("keypress", function(e) {
console.log(e);
console.log(e.key);
var keypressed = e.key;
switch (keypressed) {
case "w":
var audio = new Audio("sounds/tom-1.mp3");
audio.play();
break;
case "a":
var audio = new Audio("sounds/tom-2.mp3");
audio.play();
break;
case "s":
var audio = new Audio("sounds/tom-3.mp3");
audio.play();
break;
case "d":
var audio = new Audio("sounds/tom-4.mp3");
audio.play();
break;
case "j":
var audio = new Audio("sounds/snare.mp3");
audio.play();
break;
case "k":
var audio = new Audio("sounds/crash.mp3");
audio.play();
break;
case "l":
var audio = new Audio("sounds/kick-bass.mp3");
audio.play();
break;
default:
break;
}
})
}<h1 id="title">Drum ???? Kit</h1>
<div class="set">
<button class="w drum">w</button>
<button class="a drum">a</button>
<button class="s drum">s</button>
<button class="d drum">d</button>
<button class="j drum">j</button>
<button class="k drum">k</button>
<button class="l drum">l</button>
</div>view javascript the idea is that when i press on a keyboard it shall play a song but unfortunatly the keypress get triggered once you have clicked. How can i fixed it?
I read they saying you can use keydown, keyup, beforeinput since the keypress event has been deprecated but couldn’t get it.
would you please help me to avoid clicking before the keypress event works. Thank you. I need explanation and route to go so