How to properly use querySelectorAll with addEventListener

Question

What's the proper way to use the querySelectorAll method? I'm just trying to add a click event to each div with class '.box', but it's not working. I've found that this works fine if I replace the method with 'getElementById' and just test the kitchen box.

document.querySelectorAll('.box').addEventListener('click', test);

function test() {
  console.log('hi');
}

<section class="main">
  <div class="box" id="kitchen"></div>
  <div class="box" id="laundry"></div>
  <div class="box" id="bedroom"></div>
</section>

Use console.log to see what `querySelectorAll` outputs. It will give you insight on how to proceed. — Emiel Zuurbier, Oct 06 '20 at 19:29

score 1 · Accepted Answer · answered Oct 06 '20 at 19:30

1

It's really simple, you just loop over every element and add an event listener.

document.querySelectorAll('.box').forEach(item => {
  item.addEventListener('click', event => {
    // Handle the click event here
  })
})

answered Oct 06 '20 at 19:30

Akar

5,075
2
25
39

USHKA · Answer 2 · 2020-10-06T19:30:55.047

0

document.querySelectorAll() returns an NodeList object which you can treat as an array. You have to loop on every element and add event listener on every one of them separately.

edited Oct 06 '20 at 19:30

answered Oct 06 '20 at 19:29

USHKA

647
4
18

How to properly use querySelectorAll with addEventListener

2 Answers2