Why won't querySelectorAll select all ("li") elements?

Question

I started learning JavaScript by following a video guide. I recently ran into a problem while trying to complete an assignment from the video.

I created a list of items that you can add to or remove from by taking user inputs. You should also be able to click on an item to strike it out. It is expected that when you click on an element with strikethrough, the line should disappear. This is a toggle function.

I have figured out all the other parts except this last one.

When I use querySelector, it chooses only the first element which is fine. However, when I use querySelectorAll, nothing happens and Javascript console on Chrome returns the following:

    Uncaught TypeError: items.addEventListener is not a function

Here is what I have tried:

var items = document.querySelectorAll("li");

function toggleOnOff() {
    items.classList.toggle("done");
}

items.addEventListener("click", toggleOnOff);

I want to be able to toggle on/off any item on the list using the css strikethrough class that I have created.

`querySelectorAll` returns a collection and not a single value. It should be referenced by indices. — Krishna Prashatt, Aug 27 '19 at 14:10
https://stackoverflow.com/questions/21700364/adding-click-event-listener-to-elements-with-the-same-class — j08691, Aug 27 '19 at 14:10
because `querySelectorAll` returns a node list, you need to iterate over the list to get your answer `items.forEach(e => e.addEventListener("click", toggleOnOff));` — alexandercannon, Aug 27 '19 at 14:16
Thank you. I figured it out eventually with the pointers I got here. — mcmedal001, Aug 28 '19 at 12:29

Why won't querySelectorAll select all ("li") elements?

0 Answers0