Build a Drum Machine - Build a Drum Machine

Code Feedback
1

Tell us what’s happening:

I am failing tests 7 & 8 but I am able to play the drum-pad with both mouse-clicks and the keyboard. Can anyone see why the test still fails me?

Your code so far

<!-- file: index.html -->
<!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">
        <div class="drum-pad" id="Heater 1">Q<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-1.mp3" id="Q"></div>
        <div class="drum-pad" id="Heater 2">W<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-2.mp3" id="W"></div>
        <div class="drum-pad" id="Heater 3">E<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-3.mp3" id="E"></div>
        <div class="drum-pad" id="Heater 4">A<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-4_1.mp3" id="A"></div>
        <div class="drum-pad" id="Clap">S<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-6.mp3" id="S"></div>
        <div class="drum-pad" id="Open-HH">D<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Dsc_Oh.mp3" id="D"></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"></div>
        <div class="drum-pad" id="Kick">X<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/RP4_KICK_1.mp3" id="X"></div>
        <div class="drum-pad" id="Closed-HH">C<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Cev_H2.mp3" id="C"></div>
      </div>
      <p id="display"></p>
    </div>
    <script src="script.js"></script>
  </body>
</html>

/* file: script.js */
const body = document.querySelector("body");
const drumpad = document.querySelectorAll(".drum-pad");
const display = document.getElementById("display");
const drumKeys = ['Q','W','E','A','S','D','Z','X','C'];
const audio = new Audio();

body.addEventListener("keydown",(event)=>{playKey(event)});
drumpad.forEach((pad)=>{pad.addEventListener("click",()=>{playClick(pad)})});

function playKey(event) {
  const eventKey = event.key.toUpperCase();
  if (drumKeys.includes(eventKey)){
    const key = document.getElementById(eventKey)
    audio.src = key.src
    audio.play();
    display.innerText = key.parentElement.id
  }
}

function playClick(pad){
  audio.src = pad.children[0].src;
  audio.play();
  display.innerText = pad.id;
}

/* file: styles.css */
body {
  background:#1b1b32;
}

#display {
  color:#f1be32;
  text-align: center;
  vertical-align: middle;
  line-height:50px;
  background-color:#3b3b4f;
  width:170px;
  height:50px;
  border-radius:10%;
}

#pad-bank {
  display:grid;
  width:100px;
  height:250px;
  gap:10px;
  grid-template: 50px 50px 50px / auto auto auto;





}



.drum-pad {
  background-color:#f1be32;
  width:50px;
  height:50px;
  text-align: center;
  vertical-align: middle;
  line-height:50px;
  border-radius:25%;
  cursor: pointer;

}

Your browser information:

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

Challenge Information:

Build a Drum Machine - Build a Drum Machine

2

Update: I managed to pass test 7, now only have test 8 left. It seems the test needs me to manipulate the audio element in HTML (I was creating a new Audio instance and this will not pass the tests).

Still, with my updated code, test 8 still fails to pass;

const body = document.querySelector("body");
const drumpad = document.querySelectorAll(".drum-pad");
const display = document.getElementById("display");
const drumKeys = ['Q','W','E','A','S','D','Z','X','C'];

body.addEventListener("keydown",(event)=>{playKey(event)});
drumpad.forEach((pad)=>{pad.addEventListener("click",()=>{playClick(pad)})});

//test 8 failed
function playKey(event) {
  const eventKey = event.key.toUpperCase();
  if (drumKeys.includes(eventKey)){
    const key = document.getElementById(eventKey)
    key.play();
    display.innerText = key.parentElement.id
  }
}

//test 7 passed
function playClick(pad){
  pad.children[0].play();
  display.innerText = pad.id;
}
3

Update: I managed to complete all tests: for those struggling; make sure to target and work with the audio elements in HTML as opposed to creating new Audio instances; as well as making sure to target the whole page withdocument.addEventListener() as opposed to body.addEventListener(). I still do not understand why the drum would still work but the test would not pass. if anyone cares to indulge me on this.