onclick not firing on first click (answer only in Plain Javascript)

Question

Here is my Html Code

<div>
  <input type="checkbox" class="input-checkbox-correct" name="checkCheckbox"
         onclick="addRightAnswer();">
  <input type="text"
         placeholder="Enter your option"
         class="form-control-range-number"
         id="get-radio-input5"
         name="get-radio-input"><input
  type="number" class="get-radio-input-number" value="0"
  name="get-radio-input"/>
  <button type="click" onclick="addMoreOptions(this)"><i
    class="fa fa-plus-circle" aria-hidden="true"></i></button>
  <button type="click" onclick="removeOptions(this)"><i
    class="fa fa-minus-circle" aria-hidden="true"></i></button>
</div>
<div>
  <input type="checkbox" class="input-checkbox-correct" name="checkCheckbox"
         onclick="addRightAnswer();">
  <input type="text"
         placeholder="Enter your option"
         class="form-control-range-number"
         id="get-radio-input5"
         name="get-radio-input">
  <input
    type="number" class="get-radio-input-number" value="0"
    name="get-radio-input"/>
  <button type="click" onclick="addMoreOptions(this)"><i
    class="fa fa-plus-circle" aria-hidden="true"></i></button>
  <button type="click" onclick="removeOptions(this)"><i
    class="fa fa-minus-circle" aria-hidden="true"></i></button>
</div>
<div>
  <input type="checkbox" class="input-checkbox-correct" name="checkCheckbox"
         onclick="addRightAnswer();">
  <input type="text"
         placeholder="Enter your option"
         class="form-control-range-number"
         id="get-radio-input5"
         name="get-radio-input">
  <input
    type="number" class="get-radio-input-number" value="0"
    name="get-radio-input"/>
  <button type="click" onclick="addMoreOptions(this)"><i
    class="fa fa-plus-circle" aria-hidden="true"></i></button>
  <button type="click" onclick="removeOptions(this)"><i
    class="fa fa-minus-circle" aria-hidden="true"></i></button>
</div>
<div>
  <input type="checkbox" class="input-checkbox-correct" name="checkCheckbox"
         onclick="addRightAnswer();">
  <input type="text"
         placeholder="Enter your option"
         class="form-control-range-number"
         id="get-radio-input5"
         name="get-radio-input">
  <input
    type="number" class="get-radio-input-number" value="0"
    name="get-radio-input"/>
  <button type="click" onclick="addMoreOptions(this)"><i
    class="fa fa-plus-circle" aria-hidden="true"></i></button>
  <button type="click" onclick="removeOptions(this)"><i
    class="fa fa-minus-circle" aria-hidden="true"></i></button>
</div>

This is my Javascript Code

function addRightAnswer() {
var getRadioOptionsNumberCheck = document.querySelectorAll('.input-checkbox-correct');
var getRadioInputNumber = document.querySelectorAll('.get-radio-input-number');

  getRadioOptionsNumberCheck.forEach(function(current, index) {
    current.addEventListener('click', function() {

      if (current.checked) {
        getRadioInputNumber[index].value = 1; //
      } 
      else
      {
        getRadioInputNumber[index].value = 0;
      }  

    });
  });
}

initially value is 0 after one click value wiill increase by 1, but in my case everything is working But First click on Checkbox value is not increasing in 2nd click value is increasing

Answer 1

You don't need to add an Event Listener if you already call addRightAnswer() on click.

Right now when you click the checkbox, you add the event listener, which will then modify the input value at the next click.

 function addRightAnswer() { var getRadioOptionsNumberCheck = document.querySelectorAll('.input-checkbox-correct'); var getRadioInputNumber = document.querySelectorAll('.get-radio-input-number'); getRadioOptionsNumberCheck.forEach(function(current, index) { if (current.checked) { getRadioInputNumber[index].value = 1; // } else { getRadioInputNumber[index].value = 0; } }); }

 <div><input type="checkbox" class="input-checkbox-correct" name="checkCheckbox" onclick="addRightAnswer();"><input type="text" placeholder="Enter your option" class="form-control-range-number" id="get-radio-input5" name="get-radio-input"><input type="number" class="get-radio-input-number" value="0" name="get-radio-input" /><button type="click" onclick="addMoreOptions(this)"><i class="fa fa-plus-circle" aria-hidden="true"></i></button><button type="click" onclick="removeOptions(this)"><i class="fa fa-minus-circle" aria-hidden="true"></i></button></div>