Build a Drum Machine - Build a Drum Machine

JavaScript
1

Tell us what’s happening:

My code is not passing test 8. What am I missing?

Your code so far

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Drum Machine</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div id="drum-machine">
      <!-- Container for the drum pads -->
      <div id="pad-bank">
        <!-- Drum pads with corresponding audio clips -->
        <div class="drum-pad" id="Heater-1">
          Q
          <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-1.mp3" id="Q"></audio>
        </div>
        <div class="drum-pad" id="Heater-2">
          W
          <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-2.mp3" id="W"></audio>
        </div>
        <div class="drum-pad" id="Heater-3">
          E
          <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-3.mp3" id="E"></audio>
        </div>
        <div class="drum-pad" id="Heater-4_1">
          A
          <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-4_1.mp3" id="A"></audio>
        </div>
        <div class="drum-pad" id="Heater-6">
          S
          <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-6.mp3" id="S"></audio>
        </div>
        <div class="drum-pad" id="Dsc_Oh">
          D
          <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Dsc_Oh.mp3" id="D"></audio>
        </div>
        <div class="drum-pad" id="Kick_n_Hat">
          Z
          <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Kick_n_Hat.mp3" id="Z"></audio>
        </div>
        <div class="drum-pad" id="RP4_KICK_1">
          X
          <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/RP4_KICK_1.mp3" id="X"></audio>
        </div>
        <div class="drum-pad" id="Cev_H2">
          C
          <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Cev_H2.mp3" id="C"></audio>
        </div>
      </div>
      <p id="display"></p>
    </div>
    <script src="script.js"></script>
  </body>
</html>



/* file: styles.css */


const drumPads = document.querySelectorAll(".drum-pad");
let display = document.getElementById("display");

drumPads.forEach((pad) => {
  pad.addEventListener("click", () => {
    let key = pad.innerText.trim();
    let audio = document.getElementById(key);
    if (audio) {
      audio.play();
      display.textContent = key;
    }
  });
});

document.addEventListener("keypress", (event) => {
  let key = event.key.toUpperCase();
  let audio = document.getElementById(key);
  if (audio) {
    audio.play();
    display.textContent = key;
  }
});

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36 Edg/136.0.0.0

Challenge Information:

Build a Drum Machine - Build a Drum Machine

2
  • technically speaking its functioning somewhat, notice that after each click/press it skips playing once for repetitive presses/clicks!! might be worth looking into it

happy coding :slight_smile:

3

I just needed to change the event from keypress to keydown and then it worked

1 Like