Drum Machine Fails test 7

1

Hi,
I know many people had the same problem with drum machines, but none of the solutions applied to my case. Here is the link to the project so far…

Even though every button shows a different string on the display I get this error on test 7:

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).

So, it works, but I fail test 7… Any ideas?
Thank you!

2

You need to create this app using react.
But for now the problem is in element with id display.You gave a class='drum-pad' to element have an id =display.
remove class='drum-pad' from that element . your code is

<button class="drum-pad" id="display">
        DRUM MACHINE
</button>

change it with following:

<div id="display">DRUM MACHINE</div>

will solve your problem.if you want to style this element as drum-pad button you can set style for this element as follows :

.drum-pad ,#display {
/*  all styles here */
}
3

Thanks for your quick answer!

I would’ve never guessed that the class could generate a problem with the tester. I removed it and now it passes all tests. Thanks again.

I know this is a front end libraries section so I should be using React, but its on pourpose I’m not. I had troubles with react because I thought it gets things much more cmplicated than they are with simple js, css and html. But, deep inside me, I knew I was wrong… So, to prove myself wrong, I am creating every challenge twice, once with react and again without it, to see the difference in development for myself.
I can already see the pros of using react, but still, its fun to code and feel the difference.