Build a Drum Machine - Build a Drum Machine

JavaScript
1

Tell us what’s happening:

I can’t pass user story 7/ test 8- clicking keyboard characters doesn’t have any effect on the app. How do I make an event listener that actually works for pressing a specific key?

Your code so far

<!-- file: index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Drum Machine</title>
  </head>
  <body>
    <div id="drum-machine">
      <div id="pad-bank">
        <p id="display"></p>
        <button class="drum-pad" id="heater-1"><audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-1.mp3" id="Q"></audio>Q</button>
        <button class="drum-pad" id="heater-2"><audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-2.mp3" id="W"></audio>W</button>
        <button class="drum-pad" id="heater-3"><audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-3.mp3" id="E"></audio>E</button>
        <button class="drum-pad" id="heater-4"><audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-4_1.mp3" id="A"></audio>A</button>
        <button class="drum-pad" id="clap"><audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-6.mp3" id="S"></audio>S</button>
        <button class="drum-pad" id="open-hh"><audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Dsc_Oh.mp3" id="D"></audio>D</button>
        <button class="drum-pad" id="kick-n-hat"><audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Kick_n_Hat.mp3" id="Z"></audio>Z</button>
        <button class="drum-pad" id="kick"><audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/RP4_KICK_1.mp3" id="X"></audio>X</button>
        <button class="drum-pad" id="closed-hh"><audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Cev_H2.mp3" id="C"></audio>C</button>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

/* file: script.js */
let drumPads = document.querySelectorAll(".drum-pad");
let audioClips = document.querySelectorAll("clip");

let display = document.getElementById("display");

drumPads.forEach((pad) => {
  pad.addEventListener("click", () => {
    let drum = pad.querySelector(".clip");
    drum.play();
    display.innerText = pad.id;
  });
  pad.addEventListener("keydown", (event) => {
    console.log(event.keyCode);
    if (event.keyCode == "q") {
      drum = document.getElementById("heater-1");
      drum.play();
      display.innerText = pad.id;
    } else if (event.key == "w") {
      drum = document.getElementById("heater-2");
      drum.play();
      display.innerText = pad.id;
    } else if (event.key == "e") {
      drum = document.getElementById("heater-3");
      drum.play();
      display.innerText = pad.id;
    } else if (event.key == "a") {
      drum = document.getElementById("heater-4");
      drum.play();
      display.innerText = pad.id;
    } else if (event.key == "s") {
      drum = document.getElementById("clap");
      drum.play();
      display.innerText = pad.id;
    } else if (event.key == "d") {
      drum = document.getElementById("open-hh");
      drum.play();
      display.innerText = pad.id;
    } else if (event.key == "z") {
      drum = document.getElementById("kick-n-hat");
      drum.play();
      display.innerText = pad.id;
    } else if (event.key == "x") {
      drum = document.getElementById("kick");
      drum.play();
      display.innerText = pad.id;
    } else if (event.key == "c") {
      drum = document.getElementById("closed-hh");
      drum.play();
      display.innerText = pad.id;
    };
  });
})

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36

Challenge Information:

Build a Drum Machine - Build a Drum Machine

2

try to have the event listener on the whole page, like on document