Drum Machine Test #7 Failing

Drum Machine Test #7 Failing
0

#1

Hi there,

I am seeking someone’s help! For the life of me I cannot figure out why my app won’t pass test number 7. I can see the unique string for each audio item being displayed as I play each audio clip, and the text is correct when I use console.log on the element’s inner text.

Thanks in advance for your help.


#2

It’s my understanding you shouldn’t be updating the DOM directly when using React.JS. It’s considered bad practice.

Now, I am not sure if that is the reason why test #7 isn’t passing but perhaps there is an interaction with the Virtual React DOM and the #display element causing the text to fail?

I would try maybe sticking the display text in the state and changing the text using this.setState({display: … }); Good luck, I’m working on the Drum Machine project right now too.


#3

Excellent point. You are most correct. That may not be the cause, but you are right that I should fix it. I’ll do that now. Thank you!


#4

Let us know if you figure it out!


#5

Well, I changed that–easy change, obviously. But it still fails the test. I would like to see how the test is actually written because from what I see, this code passes.


#6

Nothing like looking at the code!

This project expects each drum pad to have a click event, too. I’m just capturing keyboard input. I need to rewrite my project attach an event to each drum pad and then I think it will pass.

            drumPads.forEach(pad => {
              __triggerClickEventCaller(pad);
              displayText.push(document.getElementById('display').innerText);
            });

#7

@amberdiehl Did you ever get this working? I just finished my Drum Machine well enough that it passes all tests. :smiley:


#8

Ah, you’re being mean! :wink: No, I have not spent time on it. I took the weekend off a bit and today have been busy with client work. That said, I think I’ll spend a little time on it now and see if I can close it out. The calculator looks like fun.

Here’s the Github link you were asking about: https://github.com/freeCodeCamp/freeCodeCamp