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 Responding to User Interaction The Event Object

Micah Doulos
Micah Doulos
17,662 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,662 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,662 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)