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

Question

I just had a question, because my code below works and plays the correct sound, however, also gives me an error in the console saying:

index.js:26 Uncaught TypeError: Cannot read property 'play' of undefined at HTMLButtonElement.handleClick (index.js:26)
handleClick @ index.js:26

What I'm trying to do is to assign a number of buttons to their corresponding sounds. I was just wondering if there was a better way to do this and where the error might be coming from?

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

Okay, I was an idiot and as Nipun Jain pointed out, I repeated the code too many times. The working code should have been this:

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

Answer 2

Firstly you are creating three for loop for same drumNameArray . You can use a single. And also you are adding eventListner to drumAreaArray in two loops. Just change it.