<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"
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>