Build a Drum Machine - CANNOT PASS 7TH TEST

JavaScript
1

Tell us what’s happening:

I cannot pass the 7th test even though I think my code serves the purpose. I think I misunderstand the method I should use

(edit) the 7th step is:
Failed: 7. When you click on a .drum-pad element, the audio clip contained in its child audio element should be triggered.

Your code so far

<!-- file: index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Drum Machine</title>
    <link href="styles.css" rel="stylesheet">
  </head>
  <body>
    <div id="drum-machine">
      <div id="pad-bank">
        <button class="drum-pad" id="Heater-1">Q
          <audio class="clip" id="Q" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-1.mp3">
          </audio>
        </button>
        <button class="drum-pad" id="Heater-2">W
          <audio class="clip" id="W" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-2.mp3">
          </audio>
        </button>
        <button class="drum-pad" id="Heater-3">E
          <audio class="clip" id="E" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-3.mp3">
          </audio>
        </button>

        <button class="drum-pad" id="Heater-4">A
          <audio class="clip" id="A" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-4_1.mp3">
          </audio>
        </button>
        <button class="drum-pad" id="Clap">S
          <audio class="clip" id="S" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-6.mp3">
          </audio>
        </button>
        <button class="drum-pad" id="Open-HH">D
          <audio class="clip" id="D" src="https://cdn.freecodecamp.org/curriculum/drum/Dsc_Oh.mp3">
          </audio>
        </button>

        <button class="drum-pad" id="RP4_KICK_1">Z
          <audio class="clip" id="Z" src="https://cdn.freecodecamp.org/curriculum/drum/Kick_n_Hat.mp3">
          </audio>
        </button>
        <button class="drum-pad" id="Kick">X
          <audio class="clip" id="X" src="https://cdn.freecodecamp.org/curriculum/drum/RP4_KICK_1.mp3">
          </audio>
        </button>
        <button class="drum-pad" id="Cev_H2">C
          <audio class="clip" id="C" src="https://cdn.freecodecamp.org/curriculum/drum/Cev_H2.mp3">
          </audio>
        </button>
      </div>
      <p id="display">display</p>
    </div>

    <script src="script.js"></script>
  </body>
</html>

/* file: styles.css */
* {
  box-sizing: border-box;
}

html {
  background-color: #32012F;
}

#drum-machine {
  margin: 100px auto;
  text-align: center;
  background-color: #524C42;
  width: 400px;
  height: 500px;
  border: 2px solid #E2DFD0;
  border-radius: 10px;
}
 
#pad-bank {
  margin: 10px auto 0px;
  padding-top: 50px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  
  width: 300px;
  height: 300px;
  gap: 10px;
}

#pad-bank button {
  background-color: #F97300;
  border: none;
  border-radius: 10px;
}

#display {
  background-color: #E2DFD0;
  width: 50%;
  padding: 10px;
  text-align: center;
  margin: 30px auto;
}

/* file: script.js */
const pads = document.querySelectorAll(".drum-pad");

pads.forEach((pad) => {
  pad.addEventListener("click", () => {
    const audio = new Audio;
    audio.src = document.querySelector(`#${pad.id} audio`).src;
    audio.play();
  });
});

/* 
const pads = document.querySelectorAll(".drum-pad");
const clips = Array.from(document.querySelectorAll(".drum-pad .clip"));

pads.forEach((pad) => {
  pad.addEventListener("click", () => {
    const audio = new Audio;
    audio.src = clips.find((clip) => pad.innerText == clip.id).src;
    audio.play();
  });
});
*/

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:139.0) Gecko/20100101 Firefox/139.0

Challenge Information:

Build a Drum Machine - Build a Drum Machine

https://www.freecodecamp.org/learn/full-stack-developer/lab-drum-machine/build-drum-machine

2

OKAY it turns out that you can use .play() directly on the <audio> element.

I am not sure if it has been mentioned in the lectures.

Any way, the corrected code would look like this:

 document.querySelector(`#${pad.id} audio`).play();