onclick 在第一次點擊時未觸發（僅在純 Javascript 中回答）

Question

這是我的 Html 代碼

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

這是我的 Javascript 代碼

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;
      }  

    });
  });
}

初始值為 0 后單擊值將增加 1，但在我的情況下，一切正常但第一次單擊復選框值沒有增加，第二次單擊值增加

Answer 1

如果您已經在單擊時調用addRightAnswer() ，則不需要添加事件偵聽器。

現在，當您單擊復選框時，您添加了事件偵聽器，它將在下次單擊時修改輸入值。

 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>