Event listener doesnt work on some HTML elements

Question

I have 2 groups of HTML buttons, all with the class btn .

 const btn = document.querySelectorAll('.btn'); const btnArray = Array.from(btn); btnArray.forEach((item) => { item.addEventListener('click', () => { console.log('clicked'); console.log(item.value) }); });

 <div class="calculator"> <div class="display"> <p class="output">YES</p> </div> <div class="operations"> <input type="submit" class="btn add" value='+'> <input type="submit" class="btn subtract" value='-'> <input type="submit" class="btn multiply" value='x'> <input type="submit" class="btn divide" value=&divide;> <input type="submit" class="btn clear" value='CLEAR'> </div> <div class="calcBody"> <input type="submit" class="btn seven" value='7'> <input type="submit" class="btn eight" value='8'> <input type="submit" class="btn nine" value='9'> <input type="submit" class="btn four" value='4'> <input type="submit" class="btn five" value='5'> <input type="submit" class="btn six" value='6'> <input type="submit" class="btn one" value='1'> <input type="submit" class="btn two" value='2'> <input type="submit" class="btn three" value='3'> <input type="submit" class="btn zero" value='0'> <input type="submit" class="btn period" value='.'> <input type="submit" class="btn off" value='ON/OFF'> </div> </div>

This works only on the buttons in the calcBody div and not the ones in the operations div. Yet, when I console.log(btnArray) it shows all of the buttons (which is weird).

Can someone tell me why? Thanks.

Answer 1

works perfectly. I checked it on Google Chrome.