Передача аргументов в Event Listener не работает?

Question

У меня только что возник вопрос, потому что мой код, приведенный ниже, работает и воспроизводит правильный звук, однако также выдает ошибку в консоли:

index. js: 26 Uncaught TypeError : Не удается прочитать свойство 'play' из неопределенного в 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

Сначала вы создаете три для l oop для того же drumNameArray. Вы можете использовать один. А также вы добавляете eventListner к drumAreaArray в два цикла. Просто измените это.

Answer 2

Хорошо, я был идиотом, и, как отметил Нипун Джайн, я повторял код слишком много раз. Рабочий код должен был быть таким:

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();
}