計算JavaScript中的值總計未給出正確的結果
[英]Calculating total of values in javascript not giving correct result
問題描述
我想像這樣計算它們的總和：
代碼段不起作用，所以我已經實現了完整的代碼。您可以直接復制並粘貼它以進行檢查。
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變量中，但它向我顯示了這樣的錯誤。如果更改輸入字段中的值或單擊退格鍵，如何減少總數？
3 個解決方案
解決方案1
1 已采納 2018-12-02 06:27:19
當您將總和相加時，您正在關閉總和的預覽狀態，而是應考慮在輸入更改時重新計算所有總和。
$(".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>
解決方案2
0 2018-12-02 06:40:13
由於設計錯誤，您將獲得不正確的行為，並且與多個輸入字段無關。 您可以通過僅保留兩個輸入字段並記錄checkSum的值來進行checkSum 。
根本原因是checkSum += sum; 每次更改輸入對中的一個輸入字段時，該行將繼續追加兩個相似字段的總和（例如，兩個輸入類為“ txt”的類）。 錯了
為了從所有六個輸入字段中獲得正確的最終總計，您必須刪除以下行： checkSum += sum; , checkSum += sum1;, checkSum += sum2; checkSum += sum; , checkSum += sum1;, checkSum += sum2; 並從calculateSum / calculateSum1 / calculateSum2方法中調用專用函數，該函數僅將sum, sum1 and sum2跨度中的值sum, sum1 and sum2並返回它。
解決方案3
0 2018-12-02 06:44:24
checkSum += sum; 無法按照您的預期方式工作。 如果調用一次，則添加該值，但是第二次調用時，將添加兩個輸入的總和 ，而不是第二個輸入的值。
因此，如果您從1開始，然后在第二個框中輸入2，則總和為3，這很好。 但是由於您在checkSum已經有1， checkSum要添加1 + 3 ，這不是您想要的。
我知道您已經接受了答案，我只是想您可能想知道為什么您的代碼沒有按預期的方式工作。
在javascript中添加表值使我在NaN的表單元格中得到結果
[英]adding table values in javascript is giving me a result in the table cell of NaN
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.