Build A Drum Machine - Tests Not Passing

JavaScript
1

I swear this assignment is broken as heck. I’ve done everything to try to get this thing to pass. Everything seems to work on my end, but FCC won’t take it. These are the tests that fail:

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

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.

And here is my code for reference:

<!-- file: index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Drum Machine</title>
  </head>
  <body>
    <div id="drum-machine">
      <div id="pad-bank">
        <button class="drum-pad" id="Q">Q<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-1.mp3" id="Q"></button>
        <button class="drum-pad" id="W">W<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-2.mp3" id="W"></button>
        <button class="drum-pad" id="E">E<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-3.mp3" id="E"></button>
        <button class="drum-pad" id="A">A<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-4_1.mp3" id="A"></button>
        <button class="drum-pad" id="S">S<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-6.mp3" id="S"></button>
        <button class="drum-pad" id="D">D<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Dsc_Oh.mp3" id="D"></button>
        <button class="drum-pad" id="Z">Z<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Kick_n_Hat.mp3" id="Z"></button>
        <button class="drum-pad" id="X">X<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/RP4_KICK_1.mp3" id="X"></button>
        <button class="drum-pad" id="C">C<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Cev_H2.mp3" id="C"></button>
      </div>
      <p id="display"></p>
    </div>
  </body>
  <script src="script.js"></script>
</html>

/* file: script.js */
const drumPads = document.querySelectorAll(".drum-pad")
const displayElement = document.getElementById("display")

function playAudio(drum) {
  displayElement.innerText = (drum.id)
  const audioElement = document.getElementById(drum.innerText)
  audioElement.play()
}

drumPads.forEach((drum) => drum.addEventListener("click",() => playAudio(drum)))

window.addEventListener("keydown",(e) => {
  if (["q","w","e","a","s","d","z","x","c"].includes(e.key.toLowerCase())) {
    const audioElement = document.getElementById(e.key.toUpperCase())
    audioElement.play()
    const drum = audioElement.parentNode
    displayElement.innerText = (drum.id)
  }
})

Any insight as to why FCC won’t accept this?

2

Welcome to the forum @RedWing0215

What happens when you click a drum pad?

What happens when you press Q on the keyboard?

Happy coding

3

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.