Drum Machine - Tests Failing, uncertain why

JavaScript
1

Hey!

I just finished the drum machine project, but 2 of the test fields aren’t passing. However, both of them are displaying/playing audio as intended.

Test 5) says that when a .drum-pad is clicked it should trigger the audio. It does, and I definitely have the drum pad class as drum-pad. So I’m not sure why it’s failing.

Test 7) When a drum pad is triggered it should be displayed in #display. I definitely have unique names for each, and my display has an id of display, so again, not sure why it’s failing.

See attached Stackblitz link:

Sorry about the lengthy code… Just worked my way through it with stuff I remembered from the lessons.

2

Log out the various event target elements in your click handler and the event key in your key handler. Now run the test and look at the console.

3

Sorry, but I’ve been staring at this for 30 minutes and I’m not sure what I’m supposed to be picking up on.

The only thing I can see is it’s maybe something to do with duplicates inside my NumPads.

4

You should see a difference between using the app and what is logged vs when the test uses the app and what is logged.

Single click/key press

event.target.parentElement.id Heater-1
event.target.innerHTML Q
audio <audio class=​"clip" id=​"Q" src=​"https:​/​/​s3.amazonaws.com/​freecodecamp/​drums/​Heater-1.mp3">​</audio>​
event.key q

Test interaction with the app

event.target.parentElement.id pad-container
event.target.innerHTML <audio class="clip" id="Q" src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"></audio><div class="key-symbol">Q</div>
audio null
event.key Q
5

Ahhhh I was just typing out another response seconds before you sent this.
Originally I was just consoling the Event logs… Then I starting consoling the variables I had (audio being one) and just realized that was null, which was throwing the error for trying to set currentTime.

ok, I have more to think about and fix, I’ll see where fixing this takes me.

6

I would suggest you use a button element for the buttons and don’t use a div for the text content that is on top of the click target.

If you remove the height of the button text div and click on the button div and on the text div you can see what is happening and that the same thing is not logged (because the event target is different). The element you click on should be the one with the event handler on it otherwise you are relying on event bubbling.

The test doesn’t actually click the buttons, it uses the elements and fires off events. It is basically “clicking” on the parent of the audio element and not your div text element.

https://github.com/freeCodeCamp/testable-projects-fcc/blob/main/src/project-tests/drum-machine-tests.js

Also, the keycode it is using is not the same as what you are expecting (e.g. q vs Q)

1 Like
7

Finally got it, removed the <div> tag from around text content that was on top the click target… After I did that, it started throwing the error which the FCC test script was throwing, which allowed me to then troubleshoot and get it right…
Took me a couple hours to jerk around with that synthetic event passed by onClick in order to get the information out of it that I needed.

But anyway! It works! I didn’t end up having to use a <button> to make it work.

Thanks man! Appreciate your help.

1 Like
8

I would still suggest using button elements as that is what they are, buttons. The div element is not a substitution for proper semantic elements.

You can make it accessible but I see no reason to use a div element for the buttons in your case.

9

I will 100% use button elements going forward. About to start the calculator now, so I’ll use them in it for sure! Just so I don’ t in the habit of making it out of a <div>

Thanks again!

10

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