Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript and the DOM (Retiring) Making Changes to the DOM Styling Elements

Kimberly Dolcin
Kimberly Dolcin
4,369 Points
Posted by Kimberly Dolcin
Kimberly Dolcin
4,369 Points

Can someone explain from 7:50 onward i still dont understand why the paragraph content disappears and the colo ":" is th

contd and the colon ":" just remains. please explain as simplistic as possible

1 Answer

Alexander Solberg
Alexander Solberg
14,350 Points
Alexander Solberg
Alexander Solberg
14,350 Points

Well, what Guil is trying to point out here is that whenever we are sing .querySelector, it selects the first(note "first") element it matches in the DOM/document. So the last variable declared in the video, is "button", using .querySelector("button");

However, "toggleList" is also a button, in fact, it is the id of the first(note "first") button in the DOM/document, meaning the "button" variable will be assigned to the same button of which "toggleList" is assigned to. This obviously causes problems and showcases a perfect case for specificity.

In the button.addEventListener(), there is code that sets the innerHTML value to be "input.value" + ';' Thing is that because the input.value is empty, the only thing to be set in the "p" is . . .well, ';'

The event-listener for both the button variable, and the toggleList variable is activated one after the other because of the order of code, not only that, they both affect the exact same button element in the document because of lack of specificity and because of how .querySelector() works.

It all boils down to simply being more detailed about what element in the DOM/document you wish to manipulate, nothing more.

This is why Guil added the ('button.discription'), because the button he wanted to target had the class "description", thus by referencing the class, he upped the level of specificity.

Hope this helps.