(Seemingly) Working Drum Machine Fails Test 6/7

1

I have completed the project and it fails the 6th and 7th tests so it says it passes only 7 out of 8 tests.

Error message is:
>6. When I press the trigger key associated with each .drum-pad, the audio clip contained in its child <audio> element should be triggered (e.g. pressing the Q key should trigger the drum pad which contains the string "Q", pressing the W key should trigger the drum pad which contains the string "W", etc.).

it is the same message for the 7th test.

Link to project: https://codepen.io/frentric/pen/JxaYLR

1 Like
2

  1. I think you’re right, it is working, and you may want to report the issue on the GIT (there’s a report bug link on the test thingy).

  2. The reason you’re failing appears to be:

 // pressing the matching key triggers this
  keyPress(e) {
    if (document.getElementById(event.key.toUpperCase())) {
      this.setState({
        key: e.key.toUpperCase(),
      });

For some reason, it’s triggering an error “TypeError: this is undefined” when I run the tests. That said, I don’t understand why.

1 Like
3

Hello,
try to fix this:

Within #drum-machine I can see 9 clickable “drum pad” elements, each with a class name of “drum-pad”, a unique id that describes the audio clip

You’re using the same id’s twice

4

I changed it so that the pad elements are unique and different from the audio element, still getting the same issue.

5

I just pointed out smth that’s against HTML rules and user stories requirements.
Hm I believe it’s your keypress handler.
bind keypress in constructor
double-check your lifecycle methods and their syntax
You want to add keypress when DOM is ready , and remove it before unmount

1 Like
6

That was the solution. I needed to bind keyPress. :man_facepalming:

1 Like