addEventListener: click just one element of a bunch of elements

Question

I'm beginner and have trouble with something in JS that might be simple to solve.

I made a quiz based on a NetNinja Udemy course, and I want the submit button to be enabled just when the user clicks on any answer option, and not before, so that he/she can't send a totally empty quiz.

The quiz has 4 questions with 2 options each, and I found this way...

const input_a = document.getElementById("q1a");
const input_b = document.getElementById("q1b");


button.disabled = true;




input_a.addEventListener('click', () => {
    button.disabled = false;

});

input_b.addEventListener('click', () => {
    button.disabled = false;

});

...to enable the button when the user clicks on any of the two options of the first question (ids: q1a & q1b) Following this logic, there'd also be q2a, q2b, q3a, q3b, q4a & q4b..

As there is a way to include all the answers in one JS element, what should I do in the event function to say "when you click any of this 8 options, enable the button"? Because everything I tried only makes the function work if I click all the buttons, which is obviously impossible in a Quiz .

Thank you! :)

Answer 1

In the solution below, when any of the radio buttons is clicked, the submit button is activated.

let result = [false, false, false, false];
let submitButton = document.getElementById('submitButton');

/* Returns true if all tests have been completed. */
function isValid(){
  for(let i = 0 ; i < result.length ; ++i)
    if(result[i] != true)
      return false;
  
  return true;
}

/* If all tests are completed, the submit button is activated. */
function send(){
  result[this.value] = true;
  
  if(isValid()){
    submitButton.disabled = false;
    console.log("The form can be submitted!");
  }
}

/* The send() method is called when the change event of <input> elements whose type is "radio" is fired. */
document.querySelectorAll('input[type="radio"]').forEach((element) => {
    element.addEventListener("change", send);
});

<form action="#">
  <input type="radio" id="html" name="test1" value="0">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="test1" value="0">
  <label for="css">CSS</label><br><br>

  <input type="radio" id="js" name="test2" value="1">
  <label for="html">JavaScript</label><br>
  <input type="radio" id="c#" name="test2" value="1">
  <label for="css">C#</label><br><br>

  <input type="radio" id="c" name="test3" value="2">
  <label for="html">C</label><br>
  <input type="radio" id="c++" name="test3" value="2">
  <label for="css">C++</label><br><br>

  <input type="radio" id="python" name="test4" value="3">
  <label for="html">Python</label><br>
  <input type="radio" id="ruby" name="test4" value="3">
  <label for="css">Ruby</label><br><br>

  <button id="submitButton" type="submit" disabled>Submit</button>
</form>