JavaScript JavaScript and the DOM Responding to User Interaction The Event Object

Micah Doulos
Micah Doulos
17,661 Points

How do you target multiple elements within a list item?

We've learned how to interact with the textContent of any random list item by referencing the parent div and using event.target. But what if the list item contains multiple elements, not just text?

For example. I have a list item which contains a photo, an H3, and a table. If I click on any item in the list item, I am triggering a click event for the list item. I want to make the photo BIGGER and the H3 smaller when the list item is clicked. How is this done?

I assume something like: event.target.img.style.width="100px";

and

event.target.h3.style.fontSize=".5em";

is this correct? If not, how do you target these elements and change their style? How can you use img:nth-of-type(2) in an event.target.....style declaration?

3 Answers

You could also use the Element.querySelector() method:

var target = event.target;
var heading3 = target.querySelector('h3');
var secondImage = target.querySelector('img:nth-of-type(2)');
heading3.style.fontSize = '.5em';
secondImage.style.width = '100px';
Micah Doulos
Micah Doulos
17,661 Points

I'm getting an uncaught type error: Cannot read property 'target' of undefined

The code above should be in a function with the event parameter, passed as the second argument to the addEventListener method, similar to the start Wanderson Macêdo's code below:

list.addEventListener('click', function(event){
Wanderson Macêdo
Wanderson Macêdo
9,266 Points

Hi Micah, how you doing? Let me explain some things. (firstly, sorry, my English isn't good)

The target property of the event object, already is the element that trigger the event, so, it doesn't have another property called h3 or img. You need to do something else to do what you want to. Look to the code example below:

list.addEventListener('click', function(event){
    target = event.target;
    childrenElements = target.children;

    for(let i = 0; i < childrenElements.length; i++){
        if(childrenElements[i].tagName == "H3"){  childrenElements[i].style.fontSize = '.5em';  }
        if(childrenElements[i].tagName == "IMG"){  childrenElements[i].style.width = '100px';  }
    }
});

So, in this example, I'm getting the element that triggers the event, after that I'm getting all the elements that are children of the target, looping trough out all the elements and testing which one of them is a h3 or a Img element and then, I'm applying the style I want to. Is it clear to understand?

Micah Doulos
Micah Doulos
17,661 Points

Thank you for your response. I see how you select by tagName, but what if there is more than one IMG and they need to be styled separately? How do you select in your for loop the 2nd IMG?

Would it be along the lines of:-

const img = childrenElements.getElementsByTagName("IMG"); img = childrenElements[i][1]

(select 2nd image)