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

Owa Aquino
Owa Aquino
19,277 Points
Posted by 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,881 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
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
Joel Kraft
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