Tell us what’s happening:
When I press the [Check Your Code] button, I get:
“9. 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.”
However, the corresponding sounds are correctly played when I press any of the keys specified above.
How come my code does not pass test 9?
Thanks for your help.
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="padQ">
Q
<audio class="clip" id="Q" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-1.mp3"></audio>
</button>
<button class="drum-pad" id="padW">
W
<audio class="clip" id="W" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-2.mp3"></audio>
</button>
<button class="drum-pad" id="padE">
E
<audio class="clip" id="E" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-3.mp3"></audio>
</button>
<button class="drum-pad" id="padA">
A
<audio class="clip" id="A" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-4_1.mp3"></audio>
</button>
<button class="drum-pad" id="padS">
S
<audio class="clip" id="S" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-6.mp3"></audio>
</button>
<button class="drum-pad" id="padD">
D
<audio class="clip" id="D" src="https://cdn.freecodecamp.org/curriculum/drum/Dsc_Oh.mp3"></audio>
</button>
<button class="drum-pad" id="padZ">
Z
<audio class="clip" id="Z" src="https://cdn.freecodecamp.org/curriculum/drum/Kick_n_Hat.mp3"></audio>
</button>
<button class="drum-pad" id="padX">
X
<audio class="clip" id="X" src="https://cdn.freecodecamp.org/curriculum/drum/RP4_KICK_1.mp3"></audio>
</button>
<button class="drum-pad" id="padC">
C
<audio class="clip" id="C" src="https://cdn.freecodecamp.org/curriculum/drum/Cev_H2.mp3"></audio>
</button>
</div>
<p id="display"></p>
</div>
<script src="script.js"></script>
</body>
</html>
/* file: script.js */
const padQ = document.getElementById('padQ');
const padW = document.getElementById('padW');
const padE = document.getElementById('padE');
const padA = document.getElementById('padA');
const padS = document.getElementById('padS');
const padD = document.getElementById('padD');
const padZ = document.getElementById('padZ');
const padX = document.getElementById('padX');
const padC = document.getElementById('padC');
const audioQ = document.getElementById('Q');
const audioW = document.getElementById('W');
const audioE = document.getElementById('E');
const audioA = document.getElementById('A');
const audioS = document.getElementById('S');
const audioD = document.getElementById('D');
const audioZ = document.getElementById('Z');
const audioX = document.getElementById('X');
const audioC = document.getElementById('C');
const display = document.getElementById('display');
const body = document.querySelector('body');
function handleQ() {
audioQ.play();
display.innerText = 'Heater 1';
}
function handleW() {
audioW.play();
display.innerText = 'Heater 2';
}
function handleE() {
audioE.play();
display.innerText = 'Heater 3';
}
function handleA() {
audioA.play();
display.innerText = 'Heater 4';
}
function handleS() {
audioS.play();
display.innerText = 'Clap';
}
function handleD() {
audioD.play();
display.innerText = 'Open-HH';
}
function handleZ() {
audioZ.play();
display.innerText = 'Kick-n-Hat';
}
function handleX() {
audioX.play();
display.innerText = 'Kick';
}
function handleC() {
audioC.play();
display.innerText = 'Closed-HH';
}
padQ.addEventListener('click', handleQ);
padW.addEventListener('click', handleW);
padE.addEventListener('click', handleE);
padA.addEventListener('click', handleA);
padS.addEventListener('click', handleS);
padD.addEventListener('click', handleD);
padZ.addEventListener('click', handleZ);
padX.addEventListener('click', handleX);
padC.addEventListener('click', handleC);
body.addEventListener('keydown', (e) => {
switch(e.key) {
case 'q':
case 'Q':
handleQ();
break;
case 'w':
case 'W':
handleW();
break;
case 'e':
case 'E':
handleE();
break;
case 'a':
case 'A':
handleA();
break;
case 's':
case 'S':
handleS();
break;
case 'd':
case 'D':
handleD();
break;
case 'z':
case 'Z':
handleZ();
break;
case 'x':
case 'X':
handleX();
break;
case 'c':
case 'C':
handleC();
break;
}
});
/* file: styles.css */
Your browser information:
User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:152.0) Gecko/20100101 Firefox/152.0
Challenge Information:
Build a Drum Machine - Build a Drum Machine