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

Posted by Saud Tauqeer
Saud Tauqeer
Courses Plus Student 8,099 Points

someone explain me how the both event listeners were firing

so im confused of what is explained in the video. can someone clarify me the part after the if statements. The part where guil mentions about the : clue. thank you. also i feel like dave's JavaScript courses are much more..clear

2 Answers

richporter
richporter
16,727 Points

When we get to defining 'const button', querySelector grabs the first matched element. In this case it is looking for the first button in the page, which happens to be the same toggleList button.

This means when we hit the toggleList button to hide/show the list, it is also firing the second click event:

button.addEventListener('click', () => {
  p.innerHTML = input.value + ':';
});

Now because there is no value in the input (because we weren't actually trying to change/set the value) this is setting p.innerHTML to an empty string, then adding the ':' so in index.html it simply shows a colon.

Saud Tauqeer
Saud Tauqeer
Courses Plus Student 8,099 Points

Thank you i understand now.

Unsubscribed User
Unsubscribed User
5,809 Points
Unsubscribed User
Unsubscribed User
5,809 Points

Thank you for the clear answer!