Build a Drum Machine - Build a Drum Machine

JavaScript
21

Please share your current full code.

22 
const padBank = document.getElementById("pad-bank")
const drumPads = document.querySelectorAll(".drum-pad");
const display = document.getElementById("display");
const keyArray = ["Q","W","E","A","S","D","Z","X","C"];

const playDrum = (id) => {
    const audioElement = document.getElementById(id)
    display.innerText = (audioElement.parentElement.id)
    audioElement.play();
}

drumPads.forEach((drum) => {
    drum.addEventListener("click",()=>{
        playDrum(drum.innerText);
    })
})
 
document.addEventListener("keypress", (event) =>{
    if(keyArray.includes(event.key.toUpperCase())){
        playDrum(event.key.toUpperCase())
    };
});

/* Old version of the event listener step 6
padBank.addEventListener("click", (event) => {
    playDrum(event.target.innerText);
});
*/
23

…

24

Audio doesn’t play from the beginning if I press the key twice, again.

You had resolved this previously by setting the time to zero.

Don’t create a new Audio object though…

25 
const padBank = document.getElementById(“pad-bank”)
const drumPads = document.querySelectorAll(“.drum-pad”);
const display = document.getElementById(“display”);
const keyArray = [“Q”,“W”,“E”,“A”,“S”,“D”,“Z”,“X”,“C”];

const playDrum = (id) => {
const audioElement = document.getElementById(id)
display.innerText = (audioElement.parentElement.id)
audioElement.currentTime = 0;
audioElement.play();
}

drumPads.forEach((drum) => {
drum.addEventListener(“click”,()=>{
playDrum(drum.innerText);
})
})

document.addEventListener(“keydown”, (event) =>{
if(keyArray.includes(event.key.toUpperCase())){
playDrum(event.key.toUpperCase())
};
});

/* Old version of the event listener step 6
padBank.addEventListener(“click”, (event) => {
playDrum(event.target.innerText);
});
*/

Even with those changes the tests are not completed .

26

Your solution works from my end. Please try one of the following steps to move forward.

Click on the “Restart Step” button and force a refresh of your page with CTRL + F5 then try to paste the code in again.

or - Try the step in incognito or private mode.

or - Disable any/all extensions that interface with the freeCodeCamp website (such as Dark Mode, Ad Blockers, or Spellcheckers), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.

or - Ensure your browser is up-to-date or try a different browser.

I hope one of these will work for you.

27

Thanks a lot for you two held.

I’ve switch to Chrome and it passed the test .

I can now pass the javascript certification thanks to the two of you

1 Like
28

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.