Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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,349 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.