Add click event to DOM elements returned from querySelectorAll
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
h
Here is how can I help you:
- COURSES where I teach everything I know
- THE VALLEY OF CODE your web development manual
- BOOTCAMP 2024 cohort in progress, next edition in 2025
- BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
- SOLO LAB everything I know about running a lifestyle business as a solopreneur
- Interesting links collection
- Follow me on X