使用javascript自動計算輸入值的總和

Question

我需要一些幫助來計算用戶輸入的數字的總和，並自動顯示它。 當用戶刪除一個數字時，總和也應該自動計算。

 $('.col-lg-1').change(function() { var total = 0; $('.col-lg-1').each(function() { if ($(this).val() != '') { total += parseInt($(this).val()); } }); $('#result').html(total); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-lg-1"> <label>TEST 1 </label> <input type="hidden" name="section_id" value="<?php echo $section_id; ?>"> <input type="hidden" name="session_id" value="<?php echo $session_id; ?>"> <input type="hidden" name="student_id" value="<?php echo $student_id; ?>"> <input type="hidden" name="class_id" value="<?php echo $class_id; ?>"> <input type="number" name="mt_ca1" class="form-control input-sm rounded-0" required> </div> <div class="col-lg-1" id="t2"> <label>TEST 2</label> <input type="number" name="mt_ca2" class="form-control input-sm rounded-0" required> </div> <div class="col-lg-1" id="assg"> <label>TEST 3</label> <input type="number" name="mt_ca3" class="form-control input-sm rounded-0" required> </div> <div class="col-lg-1"> <label>TOTAL</label> <output id="result"></output> </div>

Answer 1

差不多好了。 您的目標是'.col-lg-1' ，它是 div，而不是輸入。 您需要定位輸入以讀取它們的值。

 const $inputs = $('input[type="number"]') $inputs.change(function() { var total = 0; $inputs.each(function() { if ($(this).val() != '') { total += parseInt($(this).val()); } }); $('#result').html(total); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-lg-1"> <label>TEST 1 </label> <input type="hidden" name="section_id" value="<?php echo $section_id; ?>"> <input type="hidden" name="session_id" value="<?php echo $session_id; ?>"> <input type="hidden" name="student_id" value="<?php echo $student_id; ?>"> <input type="hidden" name="class_id" value="<?php echo $class_id; ?>"> <input type="number" name="mt_ca1" class="form-control input-sm rounded-0" required> </div> <div class="col-lg-1" id="t2"> <label>TEST 2</label> <input type="number" name="mt_ca2" class="form-control input-sm rounded-0" required> </div> <div class="col-lg-1" id="assg"> <label>TEST 3</label> <input type="number" name="mt_ca3" class="form-control input-sm rounded-0" required> </div> <div class="col-lg-1"> <label>TOTAL</label> <output id="result"></output> </div>

Answer 2

.col-lg-1是一個DIV - 您正在附加一個更改事件並試圖從一個無效的 DIV 中獲取this.value 。

相反，將您的輸入和（在"input"事件上） .reduce()它們的值緩存為一個整數：

 jQuery(function($) { var $inp = $('.input-sm'); //PS: Use a more specific selector than this one var $res = $('#result'); $inp.on('input', function() { const tot = $inp.get().reduce(function(acc, el) { acc += parseInt(el.value) || 0; return acc; }, 0); $res.text(tot); }); });

 <div> <label>TEST 1 </label> <input type="number" name="mt_ca1" class="inp form-control input-sm rounded-0" required value="0"> </div> <div class="col-lg-1" id="t2"> <label>TEST 2</label> <input type="number" name="mt_ca2" class="form-control input-sm rounded-0" required value="0"> </div> <div class="col-lg-1" id="assg"> <label>TEST 3</label> <input type="number" name="mt_ca3" class="form-control input-sm rounded-0" required value="0"> </div> <div class="col-lg-1"> <label>TOTAL</label> <output id="result"></output> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 3

您的每個元素都是數字類型，並且具有相同的類“form-control”、“input-sm”和“rounded-0”。 所以要么

$('input[type=number]').change(function() {
  var total = 0;
  $('input[type=number]').each(function() {
    if ($(this).val() != '') {
      total += parseInt($(this).val());
    }
  });
  $('#result').html(total);
});

或者

$('.rounded-0').change(function() {
  var total = 0;
  $('.rounded-0').each(function() {
    if ($(this).val() != '') {
      total += parseInt($(this).val());
    }
  });
  $('#result').html(total);
});

可以使用。