Build a Drum Machine - Why Am I Failing Two Tests?

JavaScript
1

Tell us what’s happening:

I have most of the functionality of my drum machine complete. However, I’m failing the following tests:

#5 (When I click on a .drum-pad element, the audio clip contained in its child element should be triggered.)

#7 (When a .drum-pad is triggered, a string describing the associated audio clip is displayed as the inner text of the #display element (each string must be unique).)

As far as I can tell, my app fulfills the functionality outlined in those tests. Any thoughts on why they’re failing?

Your code so far

My code is on Github, and the app is also hosted on Github Pages.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/front-end-libraries-projects/build-a-drum-machine/

2

Your logic is fine. There are sometimes weird test conditions that requires that code to be in specific ways.

In your case, the .drum-pad element was not playing the audio upon clicking and that was exactly the failing test was saying.

But when you clicked on your drum pad buttons, it worked, right?
But the thing is, the event was actually being triggered on h1 element inside the .drum-pad element, on the .drum-pad element itself.

I believe it is a bug/feature (:man_shrugging:) of React, as it doesn’t happen in vanilla JS. I just tested the behaviour.

So the fix is that you just remove the h1 from your drum pad element

See the line #154 and #184 here:
https://codepen.io/anon/pen/mZgbeo?editors=1010

3

Thanks so much for the help. After removing the containing h1 (and tweaking DOM selectors a bit), I was able to pass all tests.

1 Like