我想计算它们的总和，如下所示:
代码片段不起作用，所以我有完整的实现代码。您可以直接复制并粘贴它来检查。
var checkSum=0;
var sumData = [];
//first row total calcualtion
$(".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);
checkSum += sum;
sumData.push(sum);
}
//2nd row calculation
$(".txt1").each(function() {
$(this).keyup(function(){
calculateSum1();
});
});
function calculateSum1() {
var sum1 = 0;
//iterate through each textboxes and add the values
$(".txt1").each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum1+= parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#sum1").html(sum1);
checkSum += sum1;
sumData.push(sum1);
}
//3rd row calculation
$(".txt2").each(function() {
$(this).keyup(function(){
calculateSum2();
});
});
function calculateSum2() {
var sum2 = 0;
//iterate through each textboxes and add the values
$(".txt2").each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum2+= parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#sum2").html(sum2);
sumData.push(sum2);
checkSum += sum2;
console.log(checkSum);
}<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-md-2">
<input type="number" class="form-control txt" id="customAmount" name="customReason" min="0">
</div>
<div class="col-md-2">
<input type="number" class="form-control txt" id="customPenalty" name="customPenalty" min="0">
</div>
<div class="col-md-1">
<span id="sum">0</span>
</div>
<div class="col-md-2">
<input type="text" class="form-control txt1" id="vatAmount" name="vatAmount" min="0">
</div>
<div class="col-md-2">
<input type="text" class="form-control txt1" id="vatPenalty" name="vatPenalty" min="0">
</div>
<div class="col-md-1">
<span id="sum1">0</span>
</div>
<div class="col-md-2">
<input type="text" class="form-control txt2" id="exciseAmount" name="exciseAmount" min="0">
</div>
<div class="col-md-2">
<input type="text" class="form-control txt2" id="excisePenalty" name="excisePenalty" min="0">
</div>
<div class="col-md-1">
<span id="sum2">3</span>
</div>
</body>
</html>我尝试将 sum 放入 checkSum 变量中，但它向我显示了这样的错误。如果输入字段内的值发生更改或单击退格键，如何减少总数？
最佳答案
当您将总和相加时，您正在处理总和的预览状态，相反，您应该考虑在输入更改时重新计算所有总和。
$(".txt,.txt1,.txt2").keyup(calculateSums);
function calculateSums() {
var names = ["", "1", "2"];
var sum = 0;
var total = 0;
for (var i = 0; i < names.length; i++) {
sum = 0;
$(".txt"+names[i]).each(function() {
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
$("#sum"+names[i]).html(sum);
total += sum;
}
console.log(total);
}<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-md-2">
<input type="number" class="form-control txt" id="customAmount" name="customReason" min="0">
</div>
<div class="col-md-2">
<input type="number" class="form-control txt" id="customPenalty" name="customPenalty" min="0">
</div>
<div class="col-md-1">
<span id="sum">0</span>
</div>
<div class="col-md-2">
<input type="text" class="form-control txt1" id="vatAmount" name="vatAmount" min="0">
</div>
<div class="col-md-2">
<input type="text" class="form-control txt1" id="vatPenalty" name="vatPenalty" min="0">
</div>
<div class="col-md-1">
<span id="sum1">0</span>
</div>
<div class="col-md-2">
<input type="text" class="form-control txt2" id="exciseAmount" name="exciseAmount" min="0">
</div>
<div class="col-md-2">
<input type="text" class="form-control txt2" id="excisePenalty" name="excisePenalty" min="0">
</div>
<div class="col-md-1">
<span id="sum2">3</span>
</div>
</body>
</html>关于javascript - 计算javascript中的总值没有给出正确的结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53577887/