javascript使用默认值属性计算输入字段的总和

我在用javascript计算总和时遇到了麻烦

下面是我的html代码：

Qty1 : <input class="txt" type="number" value="2" name="qty" id="qty1"/><br>
Qty2 : <input class="txt" type="number" value="4" name="qty" id="qty2"/><br>
Qty3 : <input class="txt" type="number" value="3" name="qty" id="qty3"/><br>
Qty4 : <input class="txt" type="number" value="5" name="qty" id="qty4"/><br>

如果我直接在输入字段中输入数字，这段代码仍然可以正常工作。然而，使用

value

属性，我希望当我运行这个程序时，它应该立即返回结果。在我的例子中，当我运行程序时应该返回14，而不是0。 我的JSIDLE链接：

---

只需在

文档中立即调用
calculateSum（）
即可。准备就绪

：

$（文档）.ready（函数（）{
$（“.txt”）。每个（函数（）{
$（this）.on（'input'，function（）{
计算um（）；
});
});
计算um（）；
});
函数calculateSum（）{
var总和=0；
$（“.txt”）。每个（函数（）{
如果（！isNaN（this.value）&&this.value.length！=0）{
sum+=parseFloat（此.value）；
}
});
//.toFixed（）方法将最终总和舍入到小数点后2位
$（“#sum”）.html（sum.toFixed（2））；
}

Qty1:
Qty2:
Qty3:
Qty4:

您仅在输入时调用calculateSum函数。如果在此之前调用calculateSum，那么它将使用初始值进行计算

$(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));

}