Front End Development Libraries Projects - Build a Drum Machine


I’ve followed all the user stories, but tests 5 and 7 are failing, even with all functionality ok.
Some one can help me?

Link to the solution:
drum (

Challenge: Front End Development Libraries Projects - Build a Drum Machine

Link to the challenge:

1 Like

I think the issue with display is due to a mismatch between the id used in the Pad component and the corresponding element accessed in the handleKeyDown function.

To fix this issue, make sure that the id attribute in the Pad component matches the ID you’re trying to access in the handleKeyDown function.

In your Pad component, you’re using id={key${id}} to set the id attribute of the div element, but in your handleKeyDown function, you’re trying to access the element using document.getElementById(${pad[0].id}).

I hope this helps :wink:

1 Like

It is caused by the use of the onPointerDown event, if I replace that with onClick it passes the tests.

I don’t think that event type is actually fired by the test.

1 Like

Thank you for your help.
The display was passing the test, maybe you’ve looked the version that I was refactoring.
The id={ key${id}} of the .drum-pad was just to meet the requirement that the element must have an id. But I refactored it to be id={name} and used that id to show in the #display.

1 Like

Im glad it works for you. I see what u are saying!

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