Question

今天我有一个关于用js计算求和的问题。

$(document).ready(function(){

  //iterate through each textboxes and add keyup
  //handler to trigger sum event
  $(".txt").each(function() {

    $(this).keyup(function(){
      calculateSum();
    });
  });

});

function calculateSum() {

  var sum = 0;
  //iterate through each textboxes and add the values
  $(".txt").each(function() {

    //add only if the value is number
    if(!isNaN(this.value) && this.value.length!=0) {
      sum += parseFloat(this.value);
    }

  });
  //.toFixed() method will roundoff the final sum to 2 decimal places
  $("#sum").html(sum.toFixed(2));

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Qty1 : <input class="txt" type="number" name="qty" id="qty1"/><br>
Qty2 : <input class="txt" type="number" name="qty" id="qty2"/><br>
Qty3 : <input class="txt" type="number" name="qty" id="qty3"/><br>
Qty4 : <input class="txt" type="number" name="qty" id="qty4"/><br>
Qty5 : <input class="txt" type="number" name="qty" id="qty5"/><br>
Qty6 : <input class="txt" type="number" name="qty" id="qty6"/><br>
Qty7 : <input class="txt" type="number" name="qty" id="qty7"/><br>
Qty8 : <input class="txt" type="number" name="qty" id="qty8"/><br>
<br><br>
Total : <span id="sum">0</span><br>

仅当我在输入字段中直接输入数字时，此代码才有效。但是，当我单击输入字段中的上下箭头时，js代码似乎无法正常工作。我该如何解决？谢谢！

Answer 1

使用箭头符号change更改元素值时，将触发事件。

尝试使用input事件代替 keyup 。

更改<input>，<select>或<textarea>元素的值时，将触发输入事件。

更改：

$(this).keyup(function(){

收件人：

$(this).on('input',function(){

$(document).ready(function(){

  //iterate through each textboxes and add keyup
  //handler to trigger sum event
  $(".txt").each(function() {

    $(this).on('input',function(){
      calculateSum();
    });
  });

});

function calculateSum() {

  var sum = 0;
  //iterate through each textboxes and add the values
  $(".txt").each(function() {

    //add only if the value is number
    if(!isNaN(this.value) && this.value.length!=0) {
      sum += parseFloat(this.value);
    }

  });
  //.toFixed() method will roundoff the final sum to 2 decimal places
  $("#sum").html(sum.toFixed(2));

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Qty1 : <input class="txt" type="number" name="qty" id="qty1"/><br>
Qty2 : <input class="txt" type="number" name="qty" id="qty2"/><br>
Qty3 : <input class="txt" type="number" name="qty" id="qty3"/><br>
Qty4 : <input class="txt" type="number" name="qty" id="qty4"/><br>
Qty5 : <input class="txt" type="number" name="qty" id="qty5"/><br>
Qty6 : <input class="txt" type="number" name="qty" id="qty6"/><br>
Qty7 : <input class="txt" type="number" name="qty" id="qty7"/><br>
Qty8 : <input class="txt" type="number" name="qty" id="qty8"/><br>
<br><br>
Total : <span id="sum">0</span><br>

Answer 2

您还需要为change事件添加事件处理程序。

$(document).ready(function(){

  //iterate through each textboxes and add keyup
  //handler to trigger sum event
  $(".txt").each(function() {

    $(this).on('keyup change', function (){
      calculateSum();
    });
  });

});

function calculateSum() {

  var sum = 0;
  //iterate through each textboxes and add the values
  $(".txt").each(function() {

    //add only if the value is number
    if(!isNaN(this.value) && this.value.length!=0) {
      sum += parseFloat(this.value);
    }

  });
  //.toFixed() method will roundoff the final sum to 2 decimal places
  $("#sum").html(sum.toFixed(2));

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Qty1 : <input class="txt" type="number" name="qty" id="qty1"/><br>
Qty2 : <input class="txt" type="number" name="qty" id="qty2"/><br>
Qty3 : <input class="txt" type="number" name="qty" id="qty3"/><br>
Qty4 : <input class="txt" type="number" name="qty" id="qty4"/><br>
Qty5 : <input class="txt" type="number" name="qty" id="qty5"/><br>
Qty6 : <input class="txt" type="number" name="qty" id="qty6"/><br>
Qty7 : <input class="txt" type="number" name="qty" id="qty7"/><br>
Qty8 : <input class="txt" type="number" name="qty" id="qty8"/><br>
<br><br>
Total : <span id="sum">0</span><br>

通过javascript计算数字类型输入字段的总和

2 个答案: