How to add the click event to the list of DOM elements returned from querySelectorAll

How to iterate NodeList and attach event listener to each element

You can add event listeners to all elements returned by adocument.querySelectorAll()by usingfor..ofRing:

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

It is important to pay attentiondocument.querySelectorAll()Does not return an array, but a NodeList object.

You can iterate usingforEachorfor..of, You can also useArray.from()if you want.

Download mine for freeJavaScript beginner's manual


More browser tutorials: