Build a Drum Machine - Build a Drum Machine

JavaScript
1

Tell us what’s happening:

couldn’t pass the 8th step. what am i doing wrong. the sounds plays as intended but still couldn’t pass.

Your code so far

<!-- file: index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="styles.css">
    <title>Drum Machine</title>
  </head>
  <body>
    <div id="drum-machine">
      <div id="pad-bank">
        
          <button class="drum-pad" id="drum-1">Q<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-1.mp3" id="Q"></audio></button>
         
        
          <button class="drum-pad" id="drum-2">W<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-2.mp3" id="W"></audio></button>
         
        
          <button class="drum-pad" id="drum-3">E<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-3.mp3" id="E"></audio></button>
         
        
          <button class="drum-pad" id="drum-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="drum-5">S<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-6.mp3" id="S"></audio></button>
         
        
          <button class="drum-pad" id="drum-6">D<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Dsc_Oh.mp3" id="D"></audio></button>
         
        
          <button class="drum-pad" id="drum-7">Z<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Kick_n_Hat.mp3" id="Z"></audio></button>
         
        
          <button class="drum-pad" id="drum-8">X<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/RP4_KICK_1.mp3" id="X"></audio></button>
         
        
          <button class="drum-pad" id="drum-9">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 */
body{
  background-color: gray;
}

#drum-machine{
  background : white;
  position:fixed;
  top: 10%;
  left: 10%;
  width:auto;
  height:50%;
  padding:50px;

}

#pad-bank{
display:flex;
padding:50px;
height:50px;
}

.drum-pad{
  justify-content: space-evenly;
  padding:10px;
}

#display{
  border: 2px red solid;
  height: 25px;
  text-align:center;
}

/* file: script.js */
const display = document.getElementById('display')
const drumPad = document.querySelectorAll('.drum-pad');


document.body.addEventListener('keydown',(ev)=>{
let key = ev.key.toUpperCase();
const keyList = ["Q","W","E","A","S","D","Z","X","C"]
if(keyList.includes(key)){
  let audio = document.getElementById(key);
  audio.play();
  audio.currentTime =0;
  display.innerText = audio.parentElement.id;
}
})


drumPad.forEach((pad)=>{pad.addEventListener('click',()=>{
  const audio = pad.querySelector('.clip');
    audio.play();
    audio.currentTime = 0;
  display.innerText = audio.parentElement.id
})
})

Your browser information:

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

Challenge Information:

Build a Drum Machine - Build a Drum Machine

2

you’re displaying the button id(s) instead of the drum names from the table.

3

the error is related to audio i guess.

4

take a look at the example project, linked at the top of the instructions. your code mapped the audio correctly, but it’s not displaying the drum name right. it’s breaking the tests. find another way to change the display.innerText to the “drum name” column below.

drum name fileName
Heater 1 Heater-1.mp3
Heater 2 Heater-2.mp3
Heater 3 Heater-3.mp3
Heater 4 Heater-4_1.mp3
Clap Heater-6.mp3
Open-HH Dsc_Oh.mp3
Kick-n’-Hat Kick_n_Hat.mp3
Kick RP4_KICK_1.mp3
Closed-HH Cev_H2.mp3
5

yes, i did that. i change the id of the each button to its specific drum name and put it into display.innerText. but still it is showing the same error.

6

Please share your updated code

7

how can i share my updated code? you can click into the link below an it will take you to the latest code i guess.

8

Copy it and paste it into a message here.

The link is a private editor, only you can see your code. I would see my own code.

9 

<meta charset="utf-8" />

<link rel="stylesheet" href="styles.css">

<title>Drum Machine</title>

<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>
10

And the JavaScript? Will need to see that as well

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

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




document.body.addEventListener('keydown',(ev)=>{

let key = ev.key.toUpperCase();

const keyList = ["Q","W","E","A","S","D","Z","X","C"]

if(keyList.includes(key)){

  let audio = document.getElementById(key);

  audio.play();

  audio.currentTime =0;

  display.innerText = audio.parentElement.id;

}

})




drumPad.forEach((pad)=>{pad.addEventListener('click',()=>{

  const audio = pad.querySelector('.clip');

    audio.play();

    audio.currentTime = 0;

  display.innerText = audio.parentElement.id

})

})
12

I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add the backticks.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

13

remove the .body from addEventListener. Technically, it still works with but that’s what stopping you from passing.

2 Likes