Hello, I have a issue with this stage when I press on a element of the drump machine the same sounds come back so help me. Here is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drum machine</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="drum-machine">
<div class="grid-button">
<div class="drum-pad" id="Heater1">
<audio src="sound/Heater-1.mp3" class="clip" id="Q"></audio>
<button>Q</button>
</div>
<div class="drum-pad" id="Heater2">
<audio src="sound/Heater-2.mp3" class="clip" id="W"></audio>
<button >W</button>
</div>
<div class="drum-pad" id="Heater3">
<audio src="sound/Heater-3.mp3" class="clip" id="E"></audio>
<button>E</button>
</div>
<div class="drum-pad" id="Heater4">
<audio src="sound/Heater-4.mp3" class="clip" id="A"></audio>
<button>A</button>
</div>
<div class="drum-pad" id="Clap">
<audio src="sound/clap.mp3" class="clip" id="S"></audio>
<button>S</button>
</div>
<div class="drum-pad" id="Open-HH">
<audio src="sound/open-HH.mp3" class="clip" id="D"></audio>
<button>D</button>
</div>
<div class="drum-pad" id="Kick-n-Hat">
<audio src="sound/Kick_n_Hat.mp3" class="clip" id="Z"></audio>
<button>Z</button>
</div>
<div class="drum-pad" id="Kick">
<audio src="sound/KICK.mp3" class="clip" id="X"></audio>
<button>X</button>
</div>
<div class="drum-pad" id="Closed-HH">
<audio src="sound/Closed-HH.mp3" class="clip" id="C"></audio>
<button>C</button>
</div>
</div>
<div id="display"></div>
</div>
<script src="script.js"></script>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</body>
</html>
*{
margin:0;
padding:0;
box-sizing:box-border
}
.grid-button{
display: grid;
grid-template-columns:40px 40px 40px;
grid-template-rows:30px 30px 30px;
gap:25px;
}
button{
width: 50px;
height: 50px;
}
const drumpPad = document.querySelectorAll(".drum-pad");
const clips = document.querySelectorAll(".clip");
const testClip = ()=>{
clips.forEach(clip=>{
clip.play();
})
}
drumpPad.forEach(drumpad =>{
drumpad.addEventListener("click",testClip)
})
Hello @kakadhinio
The issue is in your JavaScript file as you said when you press on any element(drum pads) same sound is going to play because you said in the JS when a click event happens just trigger the testClip function (This is the reason)
To fix this problem try to use conditional statements (if/else or switch/case) in the testClip function to specify which sound should be playing when the specific drum pad is clicked by the user you can use id of the elements to distinguishes between them and for getting the id you have to use event as an argument (more info about event)
If you need more help let me know
Best,
I tried like you said me but it didn’t work. here is a snippet:
const heater1 = document.getElementById("Q");
const heater2 = document.getElementById("W");
const heater3 = document.getElementById("E");
const heater4 = document.getElementById("A");
const clap = document.getElementById("S");
const openHH = document.getElementById("D");
const kickNHat = document.getElementById("Z");
const Kick= document.getElementById("X");
const closedHH= document.getElementById("C");
const testClip = ()=>{
for(let i=0; i<clips.length; i++){
if(heater1){
return clips[0].play()
}
if(heater2){
return clips[1].play()
}
}
}
Good try but still you have to change 2 things:
-
(Optional change) As you see in the 9 initial lines you get every button one by one this is not wrong but you know you kind of repeat yourself try to give your buttons a common class name like btn and use querySelectorAll to get all of them in the array one line.
-
(Mandatory change) Your testClip function is all good but consider this:
drumpPad.forEach(drumpad =>{
drumpad.addEventListener("click", testClip)
})
How testClip know which element you clicked on?
To fix this issue you have to use event (Read the documentation to understand it)
Hint:
drumpad.addEventListener("click",(e)=>{
switch (e.target.parentElement.id){
case 'Heater1':
clips[1].play();
break;
//Write the rest on your own
}
});
If you need more help let me know
Best,
Hello, I tried like you but it doesn’t work when I click nothing happens here is my code:
const drumpPad = document.querySelectorAll(".drum-pad");
const clips = document.querySelectorAll(".clip");
const heater11= document.getElementById("heater1")
const heater1 = document.getElementById("Q");
const heater2 = document.getElementById("W");
const heater3 = document.getElementById("E");
const heater4 = document.getElementById("A");
const clap = document.getElementById("S");
const openHH = document.getElementById("D");
const kickNHat = document.getElementById("Z");
const Kick= document.getElementById("X");
const closedHH= document.getElementById("C");
const testClip = (e)=>{
switch(e.target.parentElement.id){
case heater11:
clips[0].play();
break;
}
}
drumpPad.forEach(drumpad =>{
drumpad.addEventListener("click",testClip(e))
})
Hey @kakadhinio
I’m happy to see you use e as an event handler but I explained the above (item number 2) you have to use the arrow function instead of the testClip function but you currently combine both of them (for this reason it doesn’t work) you have to delete the testClip function and only use arrow function.
Plus another mistake is you have to get the button tags inside the div with the drum-pad class and give them click event not to drumpad because a user is going to click on the button not the drumpad container
To understand better how to give an event handler to multiple elements I suggest you watch this video to understand it better.
If you need more help replay to this
Best,
Hello aminalizadeh, the issue is as soon as I do what you say we tell me that I only passed 3 tests instead 5 I don’t know what to do
@kakadhinio kindly share your code or at least take some screenshots especially share the console error messages
<div id="drum-machine">
<div class="grid-button">
<div id="Heater1">
<audio src="sound/Heater-1.mp3" class="clip" id="Q"></audio>
<button class="drum-pad">Q</button>
</div>
<div id="Heater2">
<audio src="sound/Heater-2.mp3" class="clip" id="W"></audio>
<button class="drum-pad">W</button>
</div>
<div id="Heater3">
<audio src="sound/Heater-3.mp3" class="clip" id="E"></audio>
<button class="drum-pad">E</button>
</div>
<div id="Heater4">
<audio src="sound/Heater-4.mp3" class="clip" id="A"></audio>
<button class="drum-pad">A</button>
</div>
<div id="Clap">
<audio src="sound/clap.mp3" class="clip" id="S"></audio>
<button class="drum-pad">S</button>
</div>
<div id="Open-HH">
<audio src="sound/open-HH.mp3" class="clip" id="D"></audio>
<button class="drum-pad">D</button>
</div>
<div id="Kick-n-Hat">
<audio src="sound/Kick_n_Hat.mp3" class="clip" id="Z"></audio>
<button class="drum-pad">Z</button>
</div>
<div id="Kick">
<audio src="sound/KICK.mp3" class="clip" id="X"></audio>
<button class="drum-pad">X</button>
</div>
<div id="Closed-HH">
<audio src="sound/Closed-HH.mp3" class="clip" id="C"></audio>
<button class="drum-pad">C</button>
</div>
</div>
<div id="display"></div>
</div>
Hey @kakadhinio
According to the image that you provided only 2 errors from 3 errors are visible
and both of them are related to your HTML structure, not JavaScript Just check this video and follow the step-by-step
