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![](https://ecs-static.teamtreehouse.com/assets/views/marketing/shared/community-banner-white-47072046c51352fe6a69f5e691ff5700b28bb11d45197d7bdf066d9ea3f72d0c.webp)
![Chris Adams](https://uploads.teamtreehouse.com/production/profile-photos/211332/micro_IMG_8887.jpg)
Chris Adams
Front End Web Development Techdegree Graduate 29,423 PointsIterating through adding event listeners to an HTMLCollection using a for...of loop
Hi friends, quick question about adding event listeners to an HTML collection. In Reggie's lessons on adding event listeners, we create an HTMLCollection of list items using the getElementsByTagName method:
const listItems = document.getElementsByTagName('li');
Iterating through the list using a standard for loop with a counter works:
for (let i = 0; i < listItems.length; i++) {
listItems[i].addEventListener('mouseover', () => {
listItems[i].textContent = listItems[i].textContent.toUpperCase();
});
}
However, if I try to apply the event listeners using a for...of loop, it seems to apply only to the last list item only:
for (item of listItems) {
console.log(item.textContent);
item.addEventListener('mouseover', () => {
item.textContent = item.textContent.toUpperCase();
});
}
If I go ahead and specify an event target, it will work per the first for loop:
for (item of listItems) {
console.log(item.textContent);
item.addEventListener('mouseover', (e) => {
e.target.textContent = e.target.textContent.toUpperCase();
});
}
Can any bigBrain out there help me understand why the first for...of loop would only be applying the event listener to the final item in the HTMLCollection?
2 Answers
![Stephen Cole](https://secure.gravatar.com/avatar/c318b8e289f72d3e9b157df9785c598a?s=96&d=https%3A%2F%2Fecs-static.teamtreehouse.com%2Fassets%2Fcontent%2Fdefault_avatar-445fbbabfc8dc9188fb5967fe43322ee0c3e0dd1e10f378bf8343784af5a13eb.webp&r=pg)
Stephen Cole
Courses Plus Student 15,809 PointsYou're missing the let
keyword in the for...of
statement.
for (let item of listItems) {
item.addEventListener('mouseover', () => {
item.textContent = item.textContent.toUpperCase();
});
};
You asked:
Can any bigBrain out there help me understand why the first for...of loop would only be applying the event listener to the final item in the HTMLCollection?
I think it's the event handler you added, e
.
It runs through every loop and gets reused. Therefore, it get's the last value it sees, the last item on the list. Drop it and it will work.
![martinjones1](https://secure.gravatar.com/avatar/ea31110d17ffdbc6cc964e64ed581479?s=96&d=https%3A%2F%2Fecs-static.teamtreehouse.com%2Fassets%2Fcontent%2Fdefault_avatar-445fbbabfc8dc9188fb5967fe43322ee0c3e0dd1e10f378bf8343784af5a13eb.webp&r=pg)
martinjones1
Front End Web Development Techdegree Graduate 44,823 PointsI haven't tested it, but I am wondering if it is down to a syntax used in the for of
loop.
So instead of:
for (item of listItems) {
...
}
I would try it again with:
for (let item of listItems) {
...
}
I imagine this is why it chooses the last one, looks like a good example to dive into deeper and understand why it is doing this exactly (something I will do as well as I don't have the exact or a good answer on this).
UPDATE: I did a quick test in the Chrome console and confirm that this is the issue, you will still log out the elements selected in the console, but still not sure exactly why it adds the event listener to the last one.