Drum Machine tests #5 and #6 aren't passing for some reason

JavaScript
1

Hey guys, I’ve been working on my drum machine for my front-end libraries certification, and although it’s working exactly as I wanted, for some reasons that I don’t know it’s not passing tests #5 and #6. I just want to know what’s wrong, if someone could help me figure it out I’d be so glad. Thanks in advance! :slight_smile:

Machine Drum

2

Hi @Abraham0216

I believe the major problem with your code is that you’re creating an Audio element and playing it instead of playing the one nested within the .drum-pad element. I commented out the last line of code at the bottom of the handlePadClick event handler and added the following. The tests passed.

However, my code here highlights why the tests are not passing. It is not a good way to write React code. You shouldn’t be using methods like document.getElementById in React. After making the tests pass, you need to clean up your code and be sure to follow React best practices.

 // audio.play();
    const id = newPadState[index].text
    const audioEl = document.getElementById(id)
    if(audioEl){
      audioEl.play();
    }
1 Like
3

Thanks for helping me! I decided to use useRef() to make it work!

1 Like
4

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