Drum Machine Project

JavaScript
1

I’m having similar issues. My project keeps failing the last three tests, but it seems to perform functionally as described.

  • Each button plays an audio clip when clicked
  • The corresponding keys on the keyboard produce the same effect
  • The display is updated to reflect the most recently played clip

I’m not sure what I’m missing here. :frowning:

My codepen is here: https://codepen.io/chefdaddyjay/pen/rNvvqrK

2

I moved your post to its own thread.

You can’t use an Audio constructor for this. You have to call play on the audio elements because that is what the test will check for the play/paused properties on.

For the display test the display id should be on the direct element that contains the text. You also have to move the drum-pad class and the id to the button elements from the containing div elements.

You have to bind this.grow first and then assign the bound function to document.onkeydown

3

Thank you, I made some changes, and it’s passing all the tests now. Something interesting, though is that the hotkeys functions work fine, immediately. When the pads are clicked, however, it only functions sometimes. I can click several times and only get the desired functionality once or twice. I’ve tried it with and without the onClick property on the buttons.

I submitted it for the challenge, but any ideas?

(Edited for clarity)

4

Log out event.target inside the tap and see what you get with mouse clicks. You can use event.currentTarget instead but…

A div is not permitted content for the button element so what you should do is switch the parent/child. The button should be inside the div, not the other way. That will also make event.target work again.

5

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