Build a Drum Machine test number 7 keeps failing

JavaScript
1

Tell us what’s happening:
Describe your issue in detail here.
I’m still trying to figure out why I’m failing User Story #7: even though the
display changes when I click the buttons : User Story #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).

Your code so far
this is my code: Drum Machine (codepen.io)

Your browser information:

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

Challenge: Build a Drum Machine

Link to the challenge:

2

The error message says something about how each string must be unique. I’m noticing you have two “Open-HH” in there (one in each bank). Just guessing here, but maybe that is triggering the error?

1 Like
4

I changed one of the “Open-HH” message and it didn’t work . I’m using the same sounds as freeCodeCamp’s but theirs works perfectly. So i’m confused

5

Switch to bank 2 and key-press “s”, “c” and “d”, you’ll notice something’s not working as intended so I’d start there.

1 Like
6

seems i found the error but can you please help me fix it. still can’t get my way around it

7

I’ve not tested it but I think it might be a problem that you add the keydown event listener inside the Drumpad and not inside App. So right now you have nine event listeners that all fire at the same time, but you should only have one event listener

1 Like
8

so please how can i remove the event listeners inside the drumpad and add it to the app rather. cuz i’m confused as to how to go about it

9

but the sound plays very well when it’s on bank one . Even though i added the event listener in the drumpad component. I’m sure it has something to do with bank two

10

I think the test is expecting the buttons to be the elements with the .drum-pad class. If I remove the div container and move the attributes to the button it passes.

return (
  <button
    id={clip.id}
    key={clip.keyCode}
    className={active ? "drum-pad btn active" : "drum-pad btn"}
    onClick={handlePlaySound}
  >
    <audio className="clip" id={clip.keyTrigger} src={clip.url}></audio>
    {clip.keyTrigger}
  </button>
);
1 Like
11

thank you very much. let me check it out

12

It passes the test case alright when it’s on bank one, but when i switch to bank 2 by clicking the toggle button, i fail the test case because the keys “s”, “d”, “c” don’t work really well. They tend to play different sounds but when it’s on bank one, the keys all work perfectly

13

Ok checked again, @bbsmooth already posted (almost) the solution, the problem is the double naming of “Closed-HH” and “Open-HH”. If you give those clips different names in bank 2, the tests pass.

1 Like
14

It worked :grin::laughing::laughing::sweat_smile:. Thanks everyone for your contributions, I really appreciate it

15

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