"use strict";
let numberOfDrumButtons = document.querySelectorAll('.drum').length;
for (let i = 0; i < numberOfDrumButtons; i++) {
document.querySelectorAll(".drum")[i].addEventListener('click', function () {
let buttonId = this.id;
makeSound(buttonId);
});
}
// for detecting keyboard key press
document.addEventListener('keypress', function (event) {
makeSound(event.key);
})
let makeSound = function (key) {
switch (key) {
case "a":
CssKeyPress('a');
var audio = new Audio('./sounds/tom1.mp3');
audio.play();
break;
}
let CssKeyPress = function (id) {
let getId = document.getElementById(id);
getId.classList.add('keypress');
setTimeout(function () {
getId.classList.remove('keypress');
},
100);
}
我不知道为什么这样做?有人可以向我解释吗?因此,我认为使用函数表达式不能在声明函数之前调用它。但是,在声明它们为什么起作用之前,我已经调用了CssKeyPress()
函数和makeSound()
函数。