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
Brian Patterson
19,588 PointsWhy is this not working?
I don't know why this is not working?
const toggleList = document.getElementById('toggleList');
const listDiv = document.querySelector('.list');
const descriptionInput = document.querySelector('input.description');
const descriptionP = document.querySelector('p.description');
const descriptionButton = document.querySelector('button.description');
const addItemInput = document.querySelector('input.addItemInput');
const addItemButton = document.querySelector('button.addItemButton');
const removeItemButton = document.querySelector('button.removeItemButton');
listDiv.addEventListener('mouseover', (event) => {
if (event.target.tagName == 'LI' {
event.target.textContent = event.target.textContent.toUpperCase();
}
});
listDiv.addEventListener('mouseout', (event) => {
if (event.target.tagName == 'LI' {
event.target.textContent = event.target.textContent.toLowerCase();
}
});
Also, I don't understand why he has put 'LI' ? This is very confusing and I don't understand.
2 Answers
Uche Onuekwusi
18,070 PointsThe code is not working because of the syntax errors in the if statements. There are missing bracket closes in the if statements. here is the complete code listDiv.addEventListener('mouseover', (event) => { if (event.target.tagName == 'LI' ){ event.target.textContent = event.target.textContent.toUpperCase(); } }); listDiv.addEventListener('mouseout', (event) => { if (event.target.tagName == 'LI' ){ event.target.textContent = event.target.textContent.toLowerCase(); } });
Steven Parker
231,236 PointsSince these are delegated handlers, the event could come from any contained element. The test for "LI" confirms that the element generating the event is a list item.
And both of those "if" tests for "LI" seem to be missing the closing parentheses of the conditional expression.
Brian Patterson
19,588 PointsI am still confused! Where is 'LI' ? Where has it come from? These videos have not explained this very well.
Steven Parker
231,236 PointsThe 'LI' refers to the tag name of the elements in the HTML that will be marked "<li>". Those are list items, and are the ones that this code wants to react to the mouse passing over (or away from).
Brian Patterson
19,588 PointsSo why is in CAPITALS ?
Steven Parker
231,236 PointsIt's in capitals so it will match. On HTML elements, the tagName property always returns the element name in the uppercase form.!
Brian Patterson
19,588 PointsDo you mean this "In XML (and XML-based languages such as XHTML), tagName preserves case. On HTML elements in DOM trees flagged as HTML documents, tagName returns the element name in the uppercase form. The value of tagName is the same as that of nodeName."
Steven Parker
231,236 PointsThat's the full technical explanation. But since we're using HTML here, I only mentioned the part that applies to this code.
Steven Parker
231,236 PointsSteven Parker
231,236 PointsBrian Patterson — Isn't that exactly what I said back in October?