javascript - 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 ，但在我的情况下一切正常但第一次单击 Checkbox 值没有增加，第二次单击值正在增加

标签： javascripthtmlcss

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>