将参数传递给事件侦听器不起作用?

Question

我刚刚有一个问题，因为我下面的代码可以工作并播放正确的声音，但是，控制台中也给我一个错误，说：

索引.js：26 未捕获的类型错误：无法读取未定义的属性"play" 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();
}

Answer 1

首先，您正在为相同的drumNameArray创建三个 for 循环。您可以使用单个。 此外，您还将 eventListner 添加到两个循环中的drumAreaArray。只需更改它。

Answer 2

好吧，我是个白痴，正如Nipun Jain指出的那样，我重复了太多次代码。 工作代码应该是这样的：

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++)
{
//add audio for all files
let soundPath = "sounds/" + drumNameArray[i] +".mp3";
let tempSound = new Audio(soundPath);
drumSoundArray.push(tempSound);
//add event listeners to all drums
drumAreaArray[i].addEventListener("click",function(){handleClick(i);});
}
function handleClick(numberDrum)
{
drumSoundArray[numberDrum].play();
}