Tell us what’s happening:
Hi all, am stuck on #8 : 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. May anyone assist please
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">
<p id="display"></p>
<div id="pad-bank">
<div id="Heater1" class="drum-pad">Q<audio class="clip" id="Q" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-1.mp3"></audio></div>
<div id="Heater2" class="drum-pad">W<audio class="clip" id="W" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-2.mp3"></audio></div>
<div id="Heater3" class="drum-pad">E<audio class="clip" id="E" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-3.mp3"></audio></div>
<div id="Heater4" class="drum-pad">A<audio class="clip" id="A" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-4_1.mp3"></audio></div>
<div id="Heater5" class="drum-pad">S<audio class="clip" id="S" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-6.mp3"></audio></div>
<div id="Heater6" class="drum-pad">D<audio class="clip" id="D" src="https://cdn.freecodecamp.org/curriculum/drum/Dsc_Oh.mp3"></audio></div>
<div id="Heater7" class="drum-pad">Z<audio class="clip" id="Z" src="https://cdn.freecodecamp.org/curriculum/drum/Kick_n_Hat.mp3"></audio></div>
<div id="Heater8" class="drum-pad">X<audio class="clip" id="X" src="https://cdn.freecodecamp.org/curriculum/drum/RP4_KICK_1.mp3"></audio></div>
<div id="Heater9" class="drum-pad">C<audio class="clip" id="C" src="https://cdn.freecodecamp.org/curriculum/drum/Cev_H2.mp3"></audio></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
/* file: styles.css */
Am yet to write my css
/* file: script.js */
'
'
'
const display=document.getElementById(`display`);
const btnHeater1=document.getElementById(`Heater1`);
const audioHeater1=document.getElementById(`Q`);
btnHeater1.addEventListener(`click`,()=>{
display.innerText=``;
audioHeater1.play();
display.innerText=`Heater 1`;
});
document.addEventListener(`keydown`,(event)=>{
if(event.key==`Q`){
event.preventDefault();
display.innerText=``;
btnHeater1.click();
display.innerText=`Heater 1`;
}
})
const btnHeater2=document.getElementById(`Heater2`);
const audioHeater2=document.getElementById(`W`);
btnHeater2.addEventListener(`click`,()=>{
display.innerText=``;
audioHeater2.play();
display.innerText=`Heater 2`;
});
document.addEventListener(`keydown`,(event)=>{
if(event.key==`W`){
event.preventDefault();
display.innerText=``;
btnHeater2.click();
display.innerText=`Heater 2`;
}
})
const btnHeater3=document.getElementById(`Heater3`);
const audioHeater3=document.getElementById(`E`);
btnHeater3.addEventListener(`click`,()=>{
display.innerText=``;
audioHeater3.play();
display.innerText=`Heater 3`;
});
document.addEventListener(`keydown`,(event)=>{
if(event.key==`E`){
event.preventDefault();
display.innerText=``;
btnHeater3.click();
display.innerText=`Heater 3`;
}
})
const btnHeater4=document.getElementById(`Heater4`);
const audioHeater4=document.getElementById(`A`);
btnHeater4.addEventListener(`click`,()=>{
display.innerText=``;
audioHeater4.play();
display.innerText=`Heater 4`;
});
document.addEventListener(`keydown`,(event)=>{
if(event.key==`A`){
event.preventDefault();
display.innerText=``;
btnHeater4.click();
display.innerText=`Heater 4`;
}
})
const btnClap=document.getElementById(`Heater5`);
const audioClap=document.getElementById(`S`);
btnClap.addEventListener(`click`,()=>{
display.innerText=``;
audioClap.play();
display.innerText=`Clap`;
});
document.addEventListener(`keydown`,(event)=>{
if(event.key==`S`){
event.preventDefault();
display.innerText=``;
btnClap.click();
display.innerText=`Clap`;
}
})
const btnOpenHH=document.getElementById(`Heater6`);
const audioOpenHH=document.getElementById(`D`);
btnOpenHH.addEventListener(`click`,()=>{
display.innerText=``;
audioOpenHH.play()
display.innerText=`Open-HH`;
});
document.addEventListener(`keydown`,(event)=>{
if(event.key==`D`){
event.preventDefault();
display.innerText=``;
btnOpenHH.click();
display.innerText=`Open-HH`;
}
})
const btnKicknHat=document.getElementById(`Heater7`);
const audioKicknHat=document.getElementById(`Z`);
btnKicknHat.addEventListener(`click`,()=>{
display.innerText=``;
audioKicknHat.play();
display.innerText=`Kick-n'-Hat`;
});
document.addEventListener(`keydown`,(event)=>{
if(event.key==`Z`){
event.preventDefault();
display.innerText=``;
btnKicknHat.click();
display.innerText=`Kick-n'-Hat`;
}
})
const btnKick=document.getElementById(`Heater8`);
const audioKick=document.getElementById(`X`);
btnKick.addEventListener(`click`,()=>{
display.textinnerText=``;
audioKick.play();
display.innerText=`Kick`;
});
document.addEventListener(`keydown`,(event)=>{
if(event.key==`X`){
event.preventDefault();
display.innerText=``;
btnKick.click();
display.innerText=`Kick`;
}
})
const btnClosedHH=document.getElementById(`Heater9`);
const audioClosedHH=document.getElementById(`C`);
btnClosedHH.addEventListener(`click`,()=>{
display.innerText=``;
audioClosedHH.play()
display.innerText=`Closed-HH`;
});
document.addEventListener(`keydown`,(event)=>{
if(event.key==`C`){
event.preventDefault();
display.innerText=``;
audioClosedHH.play()
display.innerText=`Closed-HH`;
}
})
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36 Edg/142.0.0.0
Challenge Information:
Build a Drum Machine - Build a Drum Machine