I don't understand the requirement: Build a Drum Machine

JavaScript
1

Tell us what’s happening:

I have a working drum machine: https://j8ly6x.csb.app/
Currently ugly because I just wanted it to function atm.
It’s not passing these:

User Story #5: When I click on a .drum-pad element, the audio clip contained in its child audio element should be triggered.
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).

…and I’m unsure how to address them. It does both, but FCC wants me to do it a specific way I don’t quite understand.

Your code so far

Your browser information:

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

Challenge Information:

Front End Development Libraries Projects - Build a Drum Machine

Thank you!

2

This issue has to do with a “typo” in your code. Read the red error text carefully, it is telling you exactly where the problem is.

2 Likes
3

The only text that should be in the #display element is the name of the sound. You are current using a div with the id of display to wrap the entire interface. So you’ll need to rework your code a little so that #display only contains the sound name and nothing else.

4

Thanks!
Yeah, typos… fixed that issue.

Second issue, removed the wrapping (misunderstood what “display” was, thought it was the display of the app, not the text display, but that’s not important) and did:

<input
          className="display"
          id="display"
          value={this.state.editor}
          readOnly
          disabled
        />

Still unclear, sorry… it’s only the text, it’s a string, they’re all unique. Doesn’t pass.

5

If you read the red error message closely, it is saying the string should be displayed as the “inner text” of the #display element. There is actually an innerText property on HTML elements. I’m guessing that’s the property the tests are looking at. But I don’t think input elements make use of that property. Instead, they use the value property for the text you add in the text box. So I think this is where the problem is. You need to use an HTML element that will set the innerText property to the string you put inside of it. Most elements that display plain old text will do this.

6

I did actually stumble on innerText but it didn’t look like the thing I was looking for, thanks for confirming.

7

Turns out I have no idea how to use innerText.
Lost half a day trying everything for this error.
some places say innerText doesn’t work in React, some say it does; either way, tried several other options and nothing works.
It’s incredibly frustrating since I’ve got it to work multiple times with multiple methods, none of which is the “correct” one.

8

You don’t need to do anything special to use the innerText method. The innerText property will automatically be set to the text that you place inside of the element. So if you have something like:

<p>This is the text</p>

Then the innerText property for the element is set to This is the text. So you don’t need to do anything special here. Just add the text to the element as you normally would.

input elements don’t set the innerText property. Rather, they set the value property. That’s why you can’t use an input for the display.

9

<p id="display">{this.state.editor}</p>

it works, it updates, it fails the test.
Thanks for your time, btw.
Feels like every challenge so far I get stuck on something minor. First challenge had to change from codepen because awesome fonts wasn’t importing.

10

It does work when you press a key on the keyboard. It does not work if you click a drum pad with the mouse.

3 Likes
11

I did not notice that! Thank you! It works, it finally works…

12

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