javascript - 输入字段的总计值

Question

我正在尝试获取所有输入字段的总值

for ($j = 0; $j <= 4; $j++) { echo '

    <div class="form-group-sm" id="div_add_calc_aantal['.$j.']">
      <input type="number" min="0" step="1" class="form-control" id="add_calc_aantal['.$j.']" name="add_calc_aantal" value="" onchange="validate_edit(this, '.$j.')">
    </div>';

}

并将这些字段的总计放入

<input type="text" class="form-control" id="add_calc_totaal_aant" name="add_calc_totaal_aant" value="">

下面的脚本没有响应/工作

<script type="text/javascript">
function calculatie(selectVeld, nr)
{
    // Absoluut aantal
    var i, totaal = 0;
    var elems = document.getElementById('add_calc_aantal['+nr+']').value;
    var l = elems.length;
    for(i=0; i<l; i++)
    {
        totaal += parseFloat(elems[i].value) || 0;
    }
        document.getElementById('add_calc_totaal_aant').value = totaal.toFixed( 0 );
}
</script>

有什么建议吗？

Answer 1

将类 .add_calc_aantal 添加到循环中

for ($j = 0; $j <= 4; $j++) { echo '

    <div class="form-group-sm" id="div_add_calc_aantal['.$j.']">
      <input type="number" min="0" step="1" class="form-control add_calc_aantal" id="add_calc_aantal['.$j.']" name="add_calc_aantal" value="" onchange="validate_edit(this, '.$j.')">
    </div>';
    // ---------------------------------------------------------^
}

然后检查下面的示例

function calculatie() {
  // Absoluut aantal
  var totaal = 0;
  var elems = document.querySelectorAll('.add_calc_aantal'); // query new added class
  [].forEach.call(elems, function(e) {
    totaal += parseFloat(e.value) || 0;
  })
  document.getElementById('add_calc_totaal_aant').value = totaal.toFixed(0);
}
calculatie();

<!-- this html was added for demo purpose, actually its generated by your server -->
<div class="form-group-sm" id="div_add_calc_aantal[1]">
  <input type="number" min="0" step="1" class="form-control add_calc_aantal" name="add_calc_aantal" value="34" onchange="validate_edit(this, 1)">
</div>

<div class="form-group-sm" id="div_add_calc_aantal[2]">
  <input type="number" min="0" step="1" class="form-control add_calc_aantal" name="add_calc_aantal" value="45" onchange="validate_edit(this, 2)">
</div>

<div class="form-group-sm" id="div_add_calc_aantal[3]">
  <input type="number" min="0" step="1" class="form-control add_calc_aantal" name="add_calc_aantal" value="100" onchange="validate_edit(this, 3)">
</div>


<label for="add_calc_totaal_aant">totaal</label>
<input type="text" class="form-control" id="add_calc_totaal_aant" name="add_calc_totaal_aant" value="">