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
Anastasia Ponomarenko
11,802 PointsWhy do we need the If statement?
I have watched the video a few times, but I still do not understand why we need the if statement in the piece of code below:
listDiv.addEventListener('mouseover', (event) => {
if (event.target.tagName == 'LI') {
event.target.textContent = event.target.textContent.toUpperCase();
}
});
Since event.target stores the exact element where the event occurred, why doesn't the code below apply the action to the exact <li> that we clicked instead of all children of listDiv?
listDiv.addEventListener('mouseover', (event) => {
event.target.textContent = event.target.textContent.toUpperCase();
});
1 Answer
Zaid Khan
12,769 PointsWe have made our listener on <ul> that's why In order to target specific li you need to check whether the target element is li or not.
If you won't put the condition, it's going to target every element inside and including itself as well.
In order to see this effect, remove the condition and hover on all the li elements including the ul element, you will see how it's going to affect all the elements including ul.