Build a Drum Machine - Test 8

Curriculum Help
1

Tell us what’s happening:

Error message: 'When you click on a .drum-pad element, the audio clip contained in its child audio element should be triggered.

I’m not sure why this is happening. Can someone please help? Thanks!

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">
    <script src="script.js"></script>
  </head>
  <body>
    <div id="drum-machine">
      <div id="pad-bank">
        <button class="drum-pad" id="audio-clip1">
          Q <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-1.mp3" id="Q">
        </button>
        <button class="drum-pad" id="audio-clip2">
          W <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-2.mp3" id="W">
        </button>
        <button class="drum-pad" id="audio-clip3">
          E <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-3.mp3" id="E">
        </button>
        <button class="drum-pad" id="audio-clip4">
          A <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-4_1.mp3" id="A">
        </button>
        <button class="drum-pad" id="audio-clip5">
          S <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-6.mp3" id="S">
        </button>
        <button class="drum-pad" id="audio-clip6">
          D <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Dsc_Oh.mp3" id="D">
        </button>
        <button class="drum-pad" id="audio-clip7">
          Z <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Kick_n_Hat.mp3" id="Z">
        </button>
        <button class="drum-pad" id="audio-clip8">
          X <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/RP4_KICK_1.mp3" id="X">
        </button>
        <button class="drum-pad" id="audio-clip9">
          C <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Cev_H2.mp3" id="C">
        </button>
      </div>
      <p id="display"></p>
    </div>
  </body>
</html>

/* file: styles.css */


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

drumPad.forEach((pad => {
  const audio = pad.querySelector("audio");
  pad.addEventListener("click", () => {
    audio.currentTime = 0;
    audio.play();
  });
}));

Your browser information:

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

Challenge Information:

Build a Drum Machine - Build a Drum Machine

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-drum-machine/6762ec275cef87635acc4fe3.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Quick update. I realized that I didn’t include “type” as an attribute to my “audio” element. I’ve updated that part of the HTML code as follows:

        <button class="drum-pad" id="audio-clip-Q">
          Q <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-1.mp3" id="Q" type="audio/mpeg"></audio>
        </button>
        <button class="drum-pad" id="audio-clip-W">
          W <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-2.mp3" id="W" type="audio/mpeg"></audio>
        </button>
        <button class="drum-pad" id="audio-clip-E">
          E <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-3.mp3" id="E" type="audio/mpeg"></audio>
        </button>
        <button class="drum-pad" id="audio-clip-A">
          A <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-4_1.mp3" id="A" type="audio/mpeg"></audio>
        </button>
        <button class="drum-pad" id="audio-clip-S">
          S <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-6.mp3" id="S" type="audio/mpeg"></audio>
        </button>
        <button class="drum-pad" id="audio-clip-D">
          D <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Dsc_Oh.mp3" id="D" type="audio/mpeg"></audio>
        </button>
        <button class="drum-pad" id="audio-clip-Z">
          Z <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Kick_n_Hat.mp3" id="Z" type="audio/mpeg"></audio>
        </button>
        <button class="drum-pad" id="audio-clip-X">
          X <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/RP4_KICK_1.mp3" id="X" type="audio/mpeg"></audio>
        </button>
        <button class="drum-pad" id="audio-clip-C">
          C <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Cev_H2.mp3" id="C" type="audio/mpeg"></audio>
3

Hi @snaylspace,

Did you link your script file in index.html?

Happy coding

4

Hi @snaylspace

To help you debug, console log the drumPad variable.

Happy coding

5

Shouldn’t this code be inside the listener?

6

Hi @dhess - I haven’t added any script yet to this project.

7

Hi @Teller - Thanks for your response. I can see that it’s returning an empty array, but I don’t understand why.

8

???

What do you call this?

Also, I see now that you linked up your script file inside the head element.

9

@dhess - Sorry, I misread your message. I thought you were referring to styles.css.

10

Thanks @dhess - I’ve made that update.