Tell us what’s happening:
My drum machine is failing test 9, even though it plays the correct audio on keypress.
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" 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>
</body>
</html>
/* file: script.js */
let drumMachine = document.getElementById("drum-machine");
let display = document.getElementById("display");
let buttons = document.querySelectorAll(".drum-pad");
function playFromButton(event) {
let audio = event.target.querySelector("audio");
audio.play();
display.textContent = audio.id;
}
function playFromKey(keyboardEvent) {
let key = keyboardEvent.key;
let audio = document.getElementById(key.toUpperCase());
if (audio) {
audio.play();
display.textContent = key.toUpperCase() }
}
drumMachine.addEventListener("keypress", playFromKey)
buttons.forEach((button) => {
button.addEventListener("click", playFromButton)
})
/* file: styles.css */
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36
Challenge Information:
Build a Drum Machine - Build a Drum Machine