Technical documentation story #4 bug or bad code?

I’ve started building the Technical documentation page by recreating a wikipedia article with my own formatting to meet the project story requirements. User story 4 seems to be reading the entire contents of a header rather than just innertext. Is this a bug or a problem with my code?

User Story #4: Each section element with the class of main-section should also have an id that corresponds with the text of each header contained within it. Any spaces should be replaced with underscores (e.g. The section that contains the header “JavaScript and Java” should have a corresponding id="JavaScript_and_Java" ).


See this Codepen I created to show this error

If the comment tags in the above codepen are deleted, the test will fail.

I was planning on creating a heading with the below indented subheading. It seems I’ll need to split the subheadings out into a separate div or something to pass the test?


When I run the tests on your CodePen, test #4 passes.

I’ve updated the codepen to make it clear exactly which code does not pass. It was set to pass the test before with the problematic code commented out.

Ah. That’s because you added text to the header element. The innerText method will get all of the text that is displayed inside an element.
You can test this yourself:
screenshot of the browser console showing the innerText method being used

Okay, that’s what I thought might be going on when reading the error output. Haven’t made it to the FCC Javascript section yet but I wanted to make sure there wasn’t some error there.

It appears innerText looks at child containers too since nesting a couple of div elements doesn’t fix the problem. Unless there is some other better way to avoid that javascript query , I’ll pull subheadings out of the heading and code it some other way to pass.

Yup. innerText will get all of the text that is currently rendered in the element. It doesn’t have any data about structure.