我只是有一个问题,因为我下面的代码可以正常工作并播放正确的声音,但是,在控制台中也给出了一个错误:
index.js:26 Uncaught TypeError: Cannot read property 'play' of undefined at HTMLButtonElement.handleClick (index.js:26)
handleClick @ index.js:26
我想做的是将许多按钮分配给它们相应的声音。我只是想知道是否有更好的方法来做到这一点以及错误可能来自哪里?
let drumAreaArray = document.querySelectorAll(".drum");
let drumNameArray = ["crash", "kick-bass", "snare", "tom-1", "tom-2", "tom-3", "tom-4"];
let drumSoundArray = [];
for(let i = 0; i < drumNameArray.length; i++)
{
drumAreaArray[i].addEventListener("click", handleClick);
}
//add audio for all files
for(let i = 0; i < drumNameArray.length; i++)
{
let soundPath = "sounds/" + drumNameArray[i] +".mp3";
let tempSound = new Audio(soundPath);
drumSoundArray.push(tempSound);
}
//add event listeners to all drums
for(let i = 0; i < drumNameArray.length; i++)
{
drumAreaArray[i].addEventListener("click",function(){handleClick(i);});
}
function handleClick(numberDrum)
{
drumSoundArray[numberDrum].play();
}
最佳答案
首先,您要为同一个 drumNameArray
创建三个 for 循环。您可以使用单个。
您还可以在两个循环中将 eventListner 添加到 drumAreaArray 中。只需更改它即可。
关于javascript - 将参数传递给事件监听器不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59797477/