Build a Drum Machine - Build a Drum Machine

JavaScript
1

Tell us what’s happening:

everything work as it required but i can’t pass the test number 8,

  1. 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.

when i press the keyboard keys it act like it required and i hear the sound by my ears but the test can’t hear it :smiley: ,
any hints please, thank you

Your code so far

<!-- 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'>Q
          <audio class='clip' src='https://cdn.freecodecamp.org/curriculum/drum/Heater-1.mp3' id='Q'></audio>
        </button>
        <button class='drum-pad'>W
          <audio class='clip' src='https://cdn.freecodecamp.org/curriculum/drum/Heater-2.mp3' id='W'></audio>
        </button>
        <button class='drum-pad'>E
                    <audio class='clip' src='https://cdn.freecodecamp.org/curriculum/drum/Heater-3.mp3' id='E'></audio>
        </button>
        <button class='drum-pad'>A
                    <audio class='clip' src='https://cdn.freecodecamp.org/curriculum/drum/Heater-4_1.mp3' id='A'></audio>
        </button>
        <button class='drum-pad'>S
                    <audio class='clip' src='https://cdn.freecodecamp.org/curriculum/drum/Heater-6.mp3' id='S'></audio>
        </button>
        <button class='drum-pad'>D
                    <audio class='clip' src='https://cdn.freecodecamp.org/curriculum/drum/Dsc_Oh.mp3' id='D'></audio>
        </button>
        <button class='drum-pad'>Z
                    <audio class='clip' src='https://cdn.freecodecamp.org/curriculum/drum/Kick_n_Hat.mp3' id='Z'></audio>
        </button>
        <button class='drum-pad'>X
                    <audio class='clip' src='https://cdn.freecodecamp.org/curriculum/drum/RP4_KICK_1.mp3' id='X'></audio>
        </button>
        <button class='drum-pad'>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: styles.css */


/* file: script.js */
// const allButtons = document.querySelectorAll('button')

// allButtons.forEach(btn => {
//   btn.addEventListener('click', (e) => {
//     console.log(e.target.querySelector('.clip').play())
 
//   })
// })

const drumPads = document.querySelectorAll('.drum-pad');

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

drumPads.forEach(pad => {
  pad.addEventListener('click', (e) => {
    e.target.querySelector('.clip').play()
    display.innerText = e.target.textContent
  })

})


document.body.addEventListener('keypress', (e) => {
  let arrOfKeys = ['Q', 'W', 'E', 'A', 'S', 'D', 'Z', 'X', 'C']

  if(arrOfKeys.includes(e.key.toUpperCase())) {
    document.getElementById(`${e.key.toUpperCase()}`).play()


  }
})

Your browser information:

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

Challenge Information:

Build a Drum Machine - Build a Drum Machine

2

are there other event types you can think of? the tests are using a specific one

3

yes, i think there is keyup and keydown

4

one more thing i triggered event on document.body but it didnot pass till i removed body so it’s document.addEventListener what a strict mode :slight_smile: