I have 7 drums display, each drum is supposed to make a different sound when you click on it

Question

I'm taking this full-stack course, my code looks exactly as my instructor. Here's the problem, I have 7 drums display, each drum is supposed to make a different sound when you click on it, I'm using a switch statement to accomplish this, for some reason the switch statement is not working. HTML

<h1 id="title">Drum 🥁 Kit</h1>
  <div class="set">
    <button class="w drum">w</button>
    <button class="a drum">a</button>
    <button class="s drum">s</button>
    <button class="d drum">d</button>
    <button class="j drum">j</button>
    <button class="k drum">k</button>
    <button class="l drum">l</button>
  </div>

JavaScript

var numberOfButtons = document.querySelectorAll(".drum").length;

for (var i = 0; i < numberOfButtons; i++) {
  document.querySelectorAll(".drum")[i].addEventListener("click", function() {

    var buttonInnerHTML = this.innerHTML;

    switch (buttonInnerHTML) {
      case "w":
        var tom1 = new Audio("sounds/tom-1.mp3");
        tom1.play();
        break;

      case "a":
        var kick - bass = new Audio("sounds/kick-bass.mp3");
        kick - bass.play();
        break;

      case "s":
        var snare = new Audio("sounds/snare.mp3");
        snare.play();
        break;

      case "d":
        var tom - 1 = new Audio('sounds/tom-1.mp3');
        tom - 1. play();
        break;

      case "j":
        var tom - 2 = new Audio("sounds/tom-2.mp3");
        tom - 2. play();
        break;

      case "k":
        var tom - 3 = new Audio("sounds/tom-3.mp3");
        tom - 3. play();
        break;

      case "l":
        var tom - 4 = new Audio("sounds/tom-4.mp3");
        tom - 4. play();
        break;

      default:
        console.log(buttontrig);
    }


  });
}

Answer 1

var names cannot contain "-". That was a bug in your code.

Another bug in your code was fixed by changing the var buttonInnerHTML to "buttonHTML".

Copy code:

var numberOfButtons = document.querySelectorAll(".drum").length;

for (var i = 0; i < numberOfButtons; i++) {
  document.querySelectorAll(".drum")[i].addEventListener("click", function() {

    var buttonHTML = this.innerHTML;

    switch (buttonHTML) {
      case "w":
        var tom1 = new Audio("sounds/tom-1.mp3");
        tom1.play();
        break;

      case "a":
        var kick = new Audio("sounds/kick-bass.mp3");
        kick.play();
        break;

      case "s":
        var snare = new Audio("sounds/snare.mp3");
        snare.play();
        break;

      case "d":
        var tom1 = new Audio('sounds/tom-1.mp3');
        tom1. play();
        break;

      case "j":
        var tom2 = new Audio("sounds/tom-2.mp3");
        tom2. play();
        break;

      case "k":
        var tom3 = new Audio("sounds/tom-3.mp3");
        tom3. play();
        break;

      case "l":
        var tom4 = new Audio("sounds/tom-4.mp3");
        tom4. play();
        break;

      default:
        console.log(buttonHTML);
    }


  });
}