Why is querySelectorAll not selecting my buttons?

Question

I am making a quiz. I want to be able to press the answer buttons and have the modal background change colour. Initially I used querySelector for the class of the buttons (class='ansbtn') and I was only able to interact with one button. Then realised that I I have used queryselectorAll and now it will not even recognise the clicking, not even on one button. See code below

// Get answer options A,B,C,D to change text
let answerA = document.querySelector('#A')
let answerB = document.querySelector('#B')
let answerC = document.querySelector('#C')
let answerD = document.querySelector('#D')

// Get answer button pressed 
let ansbtnpress = document.querySelectorAll(".ansbtn")
ansbtnpress.addEventListener("click", checkAnswer);

function checkAnswer() {
  if (ansbtnpress.innerHTML == questions[0].correct) {
    anscontainer.style.backgroundColor = "green";
    console.log(ansbtnpress.innerHTML);
  } else {
    anscontainer.style.backgroundColor = "red";
  }
}

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <div class="container">
      <div id="question">What is an Epidemic?</div>
      <div id="answer-buttons" class="btn-grid">
        <button class="ansbtn" id="A">Answer 1</button>
        <button class="ansbtn" id="B">Answer 2</button>
        <button class="ansbtn" id="C">Answer 3</button>
        <button class="ansbtn" id="D">Answer 4</button>
      </div>
    </div>
  </div>
</div>

Any ideas as to why it wont recognise that I am clicking any of the buttons?

`querySelectorAll()` returns a ***collection*** of elements, not a single one, so you can't invoke `addEventListener()` on it directly. You need to loop through all the elements and set the event handlers individually. — Rory McCrossan, Oct 30 '22 at 13:32
Next time check your browser console first. There should have been an error `ansbtnpress.addEventListener is not a function` (with indication of which source code line it occured on) which should have told you about this problem. — CherryDT, Oct 30 '22 at 13:33

Gwhyyy · Accepted Answer · 2022-10-30T13:41:18.147

using querySelectorAll will get you a list query of all the buttons with the ansbtn class, so in order to call addEventListener on them, you are like saying :

make that list clickable

and this doesn't make sense, so you need to call addEventListener on each specific button like this :

    ansbtnpress[0].addEventListener("click", checkAnswer);
    function checkAnswer(){
    if(ansbtnpress.innerHTML == questions[0].correct){
        anscontainer.style.backgroundColor = "green";
        console.log(ansbtnpress.innerHTML);
    }else {
        anscontainer.style.backgroundColor = "red";
    }
}

this will make the first clickable

and if you want to make them all clickable, you can iterate over them with a for loop :

for(let index = 0; index < ansbtnpress.length; index+=1) {

ansbtnpress[index].addEventListener("click", checkAnswer);
function checkAnswer(){
    if(ansbtnpress.innerHTML == questions[0].correct){
        anscontainer.style.backgroundColor = "green";
        console.log(ansbtnpress.innerHTML);
    }else {
        anscontainer.style.backgroundColor = "red";
    }
})}

Why is querySelectorAll not selecting my buttons?

1 Answers1