Build a Drum Machine - Test #9

Code Feedback
1

Hello,

I’m struggling to get this test to pass even though it works on my end:

9. When you press one of the keys Q, W, E, A, S, D, Z, X, C on your keyboard, the corresponding audio element should play the corresponding sound.

Can anybody give me any tips or suggestions to get it to work?

Here is my code:

<!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">

      <div id="pad-bank">

        <button type="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 type="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 type="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 type="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 type="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 type="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 type="button" class="drum-pad" id="Kick-n-Hat">

          Z

          <audio class="clip" id="Z" src="https://cdn.freecodecamp.org/curriculum/drum/Kick_n_Hat.mp3"></audio>

        </button>




        <button type="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 type="button" class="drum-pad" id="Closed-HH">

          C

          <audio class="clip" id="C" src="https://cdn.freecodecamp.org/curriculum/drum/Cev_H2.mp3"></audio>

        </button>

      </div>

      <div id="settings-container">

        <div id="power-container">

        <p id="power-text">Power: <span id="on-off">ON</span></p>

        <button type="button" class="power-btn">

          <div id="power-slider" class="power-slider-on"></div></button>

        </div>

        <p id="display"></p>

      </div>

      

    </div>

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

  </body>

</html>



const pads = document.querySelectorAll(".drum-pad")

const padBank = document.getElementById("pad-bank");

const clips = document.querySelectorAll(".clip")

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

const powerButton = document.querySelector(".power-btn");

const powerSlider = document.getElementById("power-slider");

const onOffSpan = document.getElementById("on-off");




let powerOn = true;




window.addEventListener("keydown", (e) => {

  const key = e.key.toUpperCase();

  const audio = document.getElementById(key);




  if (audio && audio.classList.contains("clip")) {

    const pad = audio.parentElement;

    playPad(pad);

  }

})




padBank.addEventListener("click", (e) => {

  const pad = e.target.closest(".drum-pad");

  if (!pad) return;




  playPad(pad);

});




function playPad(pad) {

  if (!powerOn) return;




  const audio = pad.querySelector("audio");

  

  audio.currentTime = 0;

  audio.play();

  

  pad.classList.add("pressed");

  setTimeout(() => pad.classList.remove("pressed"), 100);




  display.textContent = pad.id;

  }




powerButton.addEventListener("click", onOff)




function onOff () {

  if (powerOn) {

    powerSlider.className = "power-slider-off";

    powerButton.classList.add("power-btn-off");

    onOffSpan.textContent = "OFF";

    display.textContent = "";

    //display.textContent = "GOODBYE";

    //setInterval(() => display.textContent = "", 1500);

    powerOn = false;

  } else {

    powerSlider.className = "power-slider-on";

    powerButton.classList.remove     ("power-btn-off");

    onOffSpan.textContent = "ON";

    powerOn = true;

  }

}
2

Welcome to the forum @joebobaggins!

Try calling addEventListener() on document rather than window.

Happy coding!

3

Perfect, that worked. So simple. Thanks for your help and for the warm welcome.