The DOM: Add click events to a list

Join the AI Workshop and learn to build real-world apps with AI. A hands-on, practical program to level up your skills.

You can add an event listener to all the elements returned by a document.querySelectorAll() call by iterating over those results using the for..of loop:

const buttons = document.querySelectorAll('#select .button')
for (const button of buttons) {
  button.addEventListener('click', function (event) {
    // ...
  })
}

It’s important to note that document.querySelectorAll() does not return an array, but a NodeList object.

You can iterate it with forEach or for..of, or you can transform it to an array with Array.from() if you want.

Lessons in this unit:

0:	Introduction
1:	The `window` object
2:	The `document` object
3:	Types of nodes
4:	Traversing the DOM
5:	Editing the DOM
6:	Selectors API
7:	DOM Ready
8:	Add a class to an element
9:	Remove a class from an element
10:	Check if element has a class
11:	Change a DOM node value
12:	Loop through DOM elements
13:	Add an image to the DOM
14:	Create a DOM attribute
15:	Remove children elements
16:	Replace a DOM element
17:	insertAdjacentHTML
18:	▶︎ Add click events to a list