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 trialStephen Cole
Courses Plus Student 15,809 PointsKeeping the uppercase-on-mouseover action
If there was an instruction to comment out the code for the mouseover event that changed the text to upper-case, I missed it.
Playing around with the code and reading the documentation, I found a way to make it work.
textContext
on the LI changes all the text inside it. This means that it will strip out the HTML with the button.
For it to work, I figured out that the LI is a parent node with TWO children. To select the first child, insert firstChild
before textContent
.
At the top of my script:
const taskList = document.querySelector('.list-container ul');
const listItems = taskList.children;
listItems
is now an HTML collection of LI
s from the UL
.
for (let item of listItems) {
item.addEventListener('mouseover', () => {
item.firstChild.textContent = item.firstChild.textContent.toUpperCase();
});
};
Here's the function that adds a new to-do list item.
btnCreate.addEventListener('click', () => {
let ul = document.getElementsByTagName('ul')[0];
const input = document.querySelector('.input-main');
let li = document.createElement('li');
li.textContent = input.value;
attachRemoveButton(li);
li.addEventListener('mouseover', () => {
li.firstChild.textContent = li.firstChild.textContent.toUpperCase();
});
ul.appendChild(li);
input.value = '';
});
I added the event-listener code before appending the UL.