Add click event to DOM elements returned from querySelectorAll
New Course Coming Soon:
Get Really Good at Git
How to iterate a NodeList and attach an event listener to each element
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.
→ Read my DOM Tutorial on
The Valley of Code
→ Read my
Browser Events Tutorial
on The Valley of Code
→ Read my
Browser APIs Tutorials
on The Valley of Code
Here is how can I help you:
- COURSES where I teach everything I know
- CODING BOOTCAMP cohort course - next edition in 2025
- BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
- Follow me on X