JavaScript JavaScript and the DOM Responding to User Interaction Listening for Events with addEventListener()

Alexander D
Alexander D
6,172 Points

Hover-effect on another list

Hello there,

I am trying to expand on this exercise and apply this hover-uppercase effect on a different list. So I am trying to go selective, rather than targeting all the LI elements in a document.

I've created a Codepen to illustrate this in a easier way:

https://codepen.io/DeMichieli/pen/ewEMzv

In the first example I reproduce what Guil is doing. In the second example I am targeting the LI elements of a secondary list (UL), however when I hover-over I trigger the effect for all the LI items at the same time. I do not understand why this happens because I should be targeting not the UL container as a whole, but the inside (LI) elements.

How can I get the same hovering effect, but on a different list? Which selectors should I use?

Thanks!

1 Answer

rydavim
MOD
rydavim
Treehouse Moderator 16,630 Points

I'm not sure if I'm understanding your question correctly. You've got working code that targets a specific list when you mouseover. This works, and only targets the specific list you've targeted. (Make sure you've commented out the first section.)

let ul = document.getElementsByTagName('ul')[1]

But what you're trying to do is to target the list you're mousing over, without hard-coding in the different lists?

If so, I would look at things like event.target, maybe using closest or children to chain on to that. Remember that you'll need to bind the listener to each element, just like you did in the first section.

It's been awhile since I've done vanilla JS, but I've got an ugly solution if you still feel stuck and would like to walk through some potential code.

Edit - Code Update

Here is one possible solution for making individual list items upper case on mouseover.

// Get all the list item elements, like you did before.
let list = document.getElementsByTagName('li');

for(var i = 0; i < list.length; i++){ // Bind the event to each li element.
  list[i].addEventListener('mouseover', () => {
    // When you mouseover an li, upper case the text for only the target li.
    event.target.textContent = event.target.textContent.toUpperCase();
  });
};

As a little bonus that makes testing easier, you can also do a mouseout event listener so that it changes back to lower case when your mouse exits the area.

for(var i = 0; i < list.length; i++){ // Still bind it to each element.
  list[i].addEventListener('mouseout', () => { 
    // When your cursor leaves the element, lower case the text.
    event.target.textContent = event.target.textContent.toLowerCase();
  });
};

MDN event.target Documentation

MDN mouseout Event Documentation

Alexander D
Alexander D
6,172 Points

Hello there,

Thanks for your response!

What I was looking to reproduce is the same hover-effect Guil is achieving in this video, at the minute 7:00, but on a secondary list.

https://teamtreehouse.com/library/listening-for-events-with-addeventlistener

In my Codepen I am able to target another list, which is great. However, when I hover over it, all the LI items are capitalised at the same time.

Therefore, I wanted to know how to target those LI items in a way that when I hover, not all of them are capitalized simultaneously.

rydavim
rydavim
Treehouse Moderator 16,630 Points

Okay, I've update the answer above with one possible solution. It looks like it isn't quite the way he does it in the video, but hopefully it gives you a better idea of what might work for you.

But please let me know if you still have questions, and I'll be happy to answer them!