I can't create const with buttons

Question

  <div class="circle-buttons">
      <button class="number-button" value="">1</button>
      <button class="number-button" value="">2</button>
      <button class="number-button" value="">3</button>
      <button class="number-button" value="">4</button>
      <button class="number-button" value="">5</button>
    </div>

const btns = document.querySelectorAll('.number-button')

const markBtn = () => {
    console.log(btns)
}

btns.addEventListener('click', markBtn)

Hi, I have problem with this code, why I can't get buttons from this function?

The problem "btns.addEventListener is not a function"

A [`NodeList`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) to be precise. `Array` offers different functionality. — Lain, Apr 22 '22 at 08:49
With that markup you could also use [event delegation](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_delegation) — Andreas, Apr 22 '22 at 08:53

EzioMercer · Answer 1 · 2022-04-22T09:07:18.193

Because document.querySelectorAll returns NodeList. You can iterate this list like this:

const btns = document.querySelectorAll('.number-button');

const markBtn = (btn, i) => {
    console.log(btn, i);
}

btns.forEach((btn, i) => btn.addEventListener('click', () => markBtn(btn, i)));

<div class="circle-buttons">
  <button class="number-button" value="">1</button>
  <button class="number-button" value="">2</button>
  <button class="number-button" value="">3</button>
  <button class="number-button" value="">4</button>
  <button class="number-button" value="">5</button>
</div>

I can't create const with buttons

1 Answers1