Tell us what’s happening:
My code is not passing test 8. What am I missing?
Your code so far
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Drum Machine</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="drum-machine">
<!-- Container for the drum pads -->
<div id="pad-bank">
<!-- Drum pads with corresponding audio clips -->
<div class="drum-pad" id="Heater-1">
Q
<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-1.mp3" id="Q"></audio>
</div>
<div class="drum-pad" id="Heater-2">
W
<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-2.mp3" id="W"></audio>
</div>
<div class="drum-pad" id="Heater-3">
E
<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-3.mp3" id="E"></audio>
</div>
<div class="drum-pad" id="Heater-4_1">
A
<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-4_1.mp3" id="A"></audio>
</div>
<div class="drum-pad" id="Heater-6">
S
<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-6.mp3" id="S"></audio>
</div>
<div class="drum-pad" id="Dsc_Oh">
D
<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Dsc_Oh.mp3" id="D"></audio>
</div>
<div 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>
</div>
<div class="drum-pad" id="RP4_KICK_1">
X
<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/RP4_KICK_1.mp3" id="X"></audio>
</div>
<div class="drum-pad" id="Cev_H2">
C
<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Cev_H2.mp3" id="C"></audio>
</div>
</div>
<p id="display"></p>
</div>
<script src="script.js"></script>
</body>
</html>
/* file: styles.css */
const drumPads = document.querySelectorAll(".drum-pad");
let display = document.getElementById("display");
drumPads.forEach((pad) => {
pad.addEventListener("click", () => {
let key = pad.innerText.trim();
let audio = document.getElementById(key);
if (audio) {
audio.play();
display.textContent = key;
}
});
});
document.addEventListener("keypress", (event) => {
let key = event.key.toUpperCase();
let audio = document.getElementById(key);
if (audio) {
audio.play();
display.textContent = key;
}
});
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36 Edg/136.0.0.0
Challenge Information:
Build a Drum Machine - Build a Drum Machine