Cannot read property 'innerText' of undefined? Code structure Explanation Required

Question

Here's the problem: I've 7 buttons in which I have to add event listener which will respond to click and play the respective sound whenever any button is clicked. I used querySelectorAll() method to select all those classes and added event listener to all those buttons using loops but the audio is not playing due to some problem in switch case expression i.e drumArray[i].innerText and I want to get explanation of the error why & how it is causing. I mean like how the switch statement terminated due to this error.

I know the switch case expression can be resolved by using this.innerText but I want to know why the following drumArray[i].innerText is not valid!

var drumArray = document.querySelectorAll('.drum');

for (var i = 0; i < drumArray.length; i++) {
  drumArray[i].addEventListener("click", function() {

    switch (drumArray[i].innerText) { //Problem here
      case "w":
        var drumAudio = new Audio('./sounds/tom-1.mp3');
        drumAudio.play();
        break;
      case "a":
        var drumAudio1 = new Audio('./sounds/tom-2.mp3');
        drumAudio1.play();
        break;
      case "s":
        var drumAudio2 = new Audio('./sounds/tom-3.mp3');
        drumAudio2.play();
        break;
      case "d":
        var drumAudio3 = new Audio('./sounds/tom-4.mp3');
        drumAudio3.play();
        break;
      case "j":
        var drumAudio4 = new Audio('./sounds/snare.mp3');
        drumAudio4.play();
        break;
      case "k":
        var drumAudio5 = new Audio('./sounds/crash.mp3');
        drumAudio5.play();
        break;
      case "l":
        var drumAudio6 = new Audio('./sounds/kick-bass.mp3');
        drumAudio6.play();
        break;
    }

  });
}

try console logging drumArray[i] at the start of the loop and see what its pushing out — Paula Livingstone, May 22 '19 at 20:07
Ok, you do not need a switch there as you are assigning click direct to the button itself. — Bibberty, May 22 '19 at 20:07
@PaulaLivingstone it logs out the button HTML from the drumArray — Yash Kumar Sati, May 22 '19 at 20:16

score 0 · Answer 1 · answered May 22 '19 at 20:09

You are assigning click to the button, so you need to take in the EventArgs.

Here we added e, this will allow use to get to e.target - in this case your button.

var drumArray = document.querySelectorAll('.drum');

for (var i = 0; i < drumArray.length; i++) {
  drumArray[i].addEventListener("click", function(e) {
    // e is the event.
    // target is the item clicked.
    switch (e.target.innerText) { //Problem here
      case "w":
        var drumAudio = new Audio('./sounds/tom-1.mp3');
        drumAudio.play();
        break;
      case "a":
        var drumAudio1 = new Audio('./sounds/tom-2.mp3');
        drumAudio1.play();
        break;
      case "s":
        var drumAudio2 = new Audio('./sounds/tom-3.mp3');
        drumAudio2.play();
        break;
      case "d":
        var drumAudio3 = new Audio('./sounds/tom-4.mp3');
        drumAudio3.play();
        break;
      case "j":
        var drumAudio4 = new Audio('./sounds/snare.mp3');
        drumAudio4.play();
        break;
      case "k":
        var drumAudio5 = new Audio('./sounds/crash.mp3');
        drumAudio5.play();
        break;
      case "l":
        var drumAudio6 = new Audio('./sounds/kick-bass.mp3');
        drumAudio6.play();
        break;
    }

  });
}

Cannot read property 'innerText' of undefined? Code structure Explanation Required

1 Answers1