Adding EventListener to this video's code

Hi Stephen,

There are a couple of issues with your code. First, you are trying to add an event listener to an HTML Collection. That is not going to work. When you grab all of the list items and store them in the variable myList, that variable represents a collection of HTML elements, and you cannot add an event listener directly to that collection. If you wish for items in that collection to have event listeners, you can either (1) add an event listener or listeners to some or each of the element by looping over the collection, or (2) you can add one event listener to the parent element of these elements that, through event bubbling, listens for click events on some or all of its children, and modifies their properties according to the code you write. The latter is often the more efficient and more DRY approach.

For instance, if you wanted to add event listeners to each of the list items that include purple items, you could loop through myList and add event listeners to those list items that do not contain the class "error-not-purple."

for(let i = 0; i < myList.length; i++) { if(myList[i].className !== "error-not-purple") { myList[i].addEventListener("click", function(event) { event.target.style.color = "purple"; }); } }

In this loop, I am looping over each list item in the myList collection, and where the item does not have the class "error-not-purple", I am adding an event listener for click events. Each event handler includes a callback function that takes the event as an argument and manipulates elements through use of the target property on that event argument. This allows you to access the target of each click event and change the value of its color property to 'purple'. Because only list items that do not contain the class 'error-not-purple' have the above event listener, the non-purple list items will not respond to mouse clicks.

Alternatively, you could add one event listener to the unordered list element that is the parent of the list items in the myList collection, and you could create the same functionality through use of event bubbling. This is the basic concept that the click event, and most others, will bubble up from the element where an event occurs through that element's ancestor elements. You can find more information on this concept at the following website: https://javascript.info/bubbling-and-capturing

document.getElementsByTagName('ul')[0].addEventListener('click', function(event) { if(event.target.className !== 'error-not-purple') { event.target.style.color = 'purple'; } });

In this code snippet, I am first targeting the ul element, then attaching an event listener to it. The associated event handler includes a callback function that, like the callback function in the example above, takes the click event as an argument, and makes use of the target property of the click event to manipulate the value of the color property on only those list items that do not contain the class 'error-not-purple.'

Another issue with your code above is your attempt to include a for loop as the second argument of your call to "myList.addEventListener". You can use a for loop in situations like this, but you will want to include the for loop inside of a callback function.

I hope that was somewhat helpful. Best of luck!