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 JavaScript and the DOM (Retiring) Responding to User Interaction Event Bubbling and Delegation

Owa Aquino
Owa Aquino
19,277 Points

Sample Workspace Code doesn't work in my end.

Hello everyone,

Maybe there's a code missing?

listDiv.addEventListener('mouseover', () => {
  listItems[i].textContent = listItems[i].textContent.toUpperCase();
});
listDiv.addEventListener('mouseout', () => {
  listItems[i].textContent = listItems[i].textContent.toLowerCase();
});

In my end, it doesn't really work once I hover on to the list items. I'm just curious of the indexing because why he did that without declaring them into a variable?

Really appreciate your help clarifying this to me. Thanks!

Ella Ruokokoski
Ella Ruokokoski
20,868 Points

do you have the code you posted wrapped in a for loop?

for (let i = 0; i < listItems.length; i += 1) {
  listItems[i].addEventListener('mouseover', () => {
    listItems[i].textContent = listItems[i].textContent.toUpperCase();
  });
  listItems[i].addEventListener('mouseout', () => {
    listItems[i].textContent = listItems[i].textContent.toLowerCase();
  });
}
Owa Aquino
Owa Aquino
19,277 Points

Hi Ella,

I used to have it on the for loop. But on the video, you'll see that Guil remove the for loop.

And the code looks like this

listDiv.addEventListener('mouseover', () => {
  listItems[i].textContent = listItems[i].textContent.toUpperCase();
});
listDiv.addEventListener('mouseout', () => {
  listItems[i].textContent = listItems[i].textContent.toLowerCase();
});

1 Answer

Joel Kraft
STAFF
Joel Kraft
Treehouse Guest Teacher

Owa,

You're right, this code won't work as it is. That's because you'll need to know about the event object in the next video. In other words, we're not done editing this code by the end of this video. The next video is where we complete the code. If you still have questions after that video, please let us know!

Thanks, Joel