The following JS-Code enables a Demo-Drum-Kit:
var numberOfdrumButtons = document.querySelectorAll(".drum").length;
// call 2 functions when the click-event is triggered
for (var i = 0; i < numberOfdrumButtons; i++) {
document.querySelectorAll(".drum")[i].addEventListener("click", function (){
var buttonInnerHTML = this.innerHTML;
makeSound(buttonInnerHTML);
buttonAnimation(buttonInnerHTML);
});
}
// call 2 functions when the keydown-event is triggered
document.addEventListener("keydown", function(event){
makeSound(event.key);
buttonAnimation(event.key);
});
//function to make sound
function makeSound(key){
switch (key) {
case "w":
var audio = new Audio("sounds/crash.mp3");
audio.play();
case "a":
var audio = new Audio("sounds/kick-bass.mp3");
audio.play();
case "s":
var audio = new Audio("sounds/snare.mp3");
audio.play();
case "d":
var audio = new Audio("sounds/tom-1.mp3");
audio.play();
case "j":
var audio = new Audio("sounds/tom-2.mp3");
audio.play();
case "k":
var audio = new Audio("sounds/tom-3.mp3");
audio.play();
case "l":
var audio = new Audio("sounds/tom-4.mp3");
audio.play();
break;
default:
break;
}
}
//function to add an animation
function buttonAnimation(currentKey){
var activeButton = document.querySelector("." + currentKey);
activeButton.classList.add("pressed");
setTimeout(function() {
activeButton.classList.remove("pressed");
}, 100
)
}
So my Question is about the currentKey-Parameter in the function buttonAnimation. Where does it come from? How can it function if its not defined before? How does it work? I stumpled across the same kind of value in another JS-Exercise and i have no clue. There the Parameter is called currentColor.
Thx in advance!
I tried to event instead, but the function buttonAnimation(currentKey) doesnt work. To be specific the setTimeout-function didnt work then.
