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 Interacting with the DOM Traversing the DOM Traversing up the DOM with parentNode

Stephen Cole
PLUS
Stephen Cole
Courses Plus Student 15,809 Points
Posted by Stephen Cole
Stephen Cole
Courses Plus Student 15,809 Points

Keeping 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 LIs 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.