Build a Drum Machine - Not passing the 8th & 9th test

JavaScript
1

Tell us what’s happening:

I am having issues trying to pass the following part of the test, I have tried different solutions and checked other forums with related topic, but still getting the same result. I appreciate your comments:
Failed 8. When you click on a .drum-pad element, the audio clip contained in its child audio element should be triggered.
Failed: 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.

Here is my code at codepen: https://codepen.io/BarbaraVazquez/pen/WbxJMyY

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">
        <button class="drum-pad" id="heater-1" >
          Q
          <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-1.mp3" id="Q"></audio>
          </button>
        <button class="drum-pad" id="heater-2" >
          W
          <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-2.mp3" id="W"></audio>
          </button>
        <button class="drum-pad" id="heater-3" >
          E
          <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-3.mp3" id="E"></audio>
          </button>
        <button class="drum-pad" id="heater-4" >
          A
          <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-4_1.mp3" id="A"></audio>
          </button>
        <button class="drum-pad" id="clap" >
          S
          <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-6.mp3" id="S"></audio>
          </button>
        <button class="drum-pad" id="open-hh" >
          D
          <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Dsc_Oh.mp3" id="D"></audio>
          </button>
        <button 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>
          </button>
        <button class="drum-pad" id="kick" >
          X
          <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/RP4_KICK_1.mp3" id="X"></audio>
          </button>
        <button class="drum-pad" id="closed-hh" >
          C
          <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Cev_H2.mp3" id="C"></audio>
          </button>
      </div>
      <p id="display"></p>
    </div>
    <script src="script.js"></script>
  </body>
</html>

/* file: script.js */
const display = document.querySelector('#display');
const drumpads = document.querySelectorAll(".drum-pad");

const allClips = [
  {
    id: 'Q',
    title: 'Heater 1',
    //src: 'https://cdn.freecodecamp.org/curriculum/drum/Heater-1.mp3' 
  },
  {
    id: 'W',
    title: 'Heater 2',
    //src: 'https://cdn.freecodecamp.org/curriculum/drum/Heater-2.mp3' 
  },
  {
    id: 'E',
    title: 'Heater 3',
    //src: 'https://cdn.freecodecamp.org/curriculum/drum/Heater-3.mp3' 
  },
  {
    id: 'A',
    title: 'Heater 4',
    //src: 'https://cdn.freecodecamp.org/curriculum/drum/Heater-4_1.mp3' 
  },
  {
    id: 'S',
    title: 'Clap',
    //src: 'https://cdn.freecodecamp.org/curriculum/drum/Heater-6.mp3' 
  },
  {
    id: 'D',
    title: 'Open-HH',
    //src: 'https://cdn.freecodecamp.org/curriculum/drum/Dsc_Oh.mp3' 
  },
  {
    id: 'Z',
    title: "Kick-n'-Hat",
    //src: 'https://cdn.freecodecamp.org/curriculum/drum/Kick_n_Hat.mp3' 
  },
  {
    id: 'X',
    title: 'Kick',
    //src: 'https://cdn.freecodecamp.org/curriculum/drum/RP4_KICK_1.mp3' 
  },
  {
    id: 'C',
    title: 'Closed-HH',
    //src: 'https://cdn.freecodecamp.org/curriculum/drum/Cev_H2.mp3' 
  }
]

const audio = new Audio();
const playSong = (id) => {
  drumpads.forEach((drumpad) => {
    const audioSelection = drumpad.querySelector("audio");
    if(audioSelection.getAttribute("id") === id){
      audio.src = audioSelection.getAttribute("src");
      console.log(audio.src)
    }
    const clip = allClips.find((clip) => clip.id === id);
    display.textContent = clip.title ? clip.title : "";
    
    audio.play()
    ;  
  })
}

drumpads.forEach((drumpad) => {
  const audioSelection = drumpad.querySelector("audio");
  const id = audioSelection.getAttribute("id");

  drumpad.addEventListener("click", () => playSong(id))
  
})

drumpads.forEach((drumpad) => {
  drumpad.addEventListener('keydown', (e) =>{
    const idx = e.key.toUpperCase();
    playSong(idx);
  })
})


/* file: styles.css */
body{
  margin: 0;
  padding: 0;
  font-family: "Arial", sans-serif;
}

#drum-machine{
  background-color: #654B7A;
  margin: 0 auto;
  width: 75vw;
  height: 100vh;
}

#pad-bank{
  width: 80%;
  margin: 0 auto;
  display: grid;
  grid-template: 1fr 1fr 1fr/ 1fr 1fr 1fr;
  grid-gap: 8px; 
}

.drum-pad{
  background-color: #637A4B;
  color: white;
  padding: 34px;
  font-size: 20px;
  border: transparent;
  border-radius: 10px;
}

#display{
  width: 80%;
  height: 80px;
  margin: 0 auto; 
  margin-top: 40px; background-color:#7A764B;
  color: white;
  border: transparent;
  border-radius: 5px;
  font-size: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 450px){
  #pad-bank{
  width: 90%;
  margin: 0 auto;
  padding-top: 15px;
  display: grid;
  grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
  grid-gap: 5px; 
}
  .drum-pad{
  padding: 15px;
  font-size: 15px;
}

}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:147.0) Gecko/20100101 Firefox/147.0

Challenge Information:

Build a Drum Machine - Build a Drum Machine

2

You are looping over drumpads three times!

How can you access the audio element you want to play? Don’t you have something unique in each audio element you can reference?

UPDATE: Here’s a quote that might help from an earlier thread on this:

3

Thank you @dhess your comments and references were really helpful! I have change my code according to you comments and now its working! Appreciate your time when reviewing my code and welcome back!