Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript Interacting with the DOM Traversing the DOM Traversing up the DOM with parentNode

Stephen Cole
PLUS
Stephen Cole
Courses Plus Student 15,592 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.