Welcome to the Treehouse Community
Looking to learn something new?
Kimberly Dolcin4,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
Alexander Solberg14,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.