Getting error listItems.addEventListener is not a function

Question

I think I've done exactly as Gil in the video, but I'm getting a console error and breaking other eventlisteners on the page when this code is added. What little detail am I missing? 
const listItems = document.getElementsByTagName('li');
listItems.addEventListener('mouseover', () => {
  listItems.textContent = listItems.textContent.toUpperCase();
});
listItems.addEventListener('mouseout', () => {
  listItems.textContent = listItems.textContent.toLowerCase();
});

Jennifer Nordell · Accepted Answer

Hi there! The listItems holds a collection of list items, not just one list item. You cannot add an eventListener onto a collection. You need to loop over the collection and add the eventListener to each individual item.
At 5:20 of this video (https://teamtreehouse.com/library/listening-for-events-with-addeventlistener) you can see that he has const listItems = document.getElementsByTagName('li')[0];. This selects the first list item and no more. But yours selects all list items.
At 5:54 he removes the [0] to select the entire collection of list items. Around 6:28 he starts implementing the for loop to iterate over the collection and add the eventListener to each individual list item.
Hope this helps! :sparkles:

Cat Perry · Answer

Got it, thanks! I noticed that just as I moved on in the video (argh!). Maybe there should be a "delete question" option for the site, as I'm sure many folks have an "aha" just as they press "post." :) thanks again

Welcome to the Treehouse Community

Looking to learn something new?

Cat Perry

Cat Perry

Getting error listItems.addEventListener is not a function

2 Answers

Jennifer Nordell

Jennifer Nordell

Cat Perry

Cat Perry

Jennifer Nordell

Jennifer Nordell