如何從輸入框中減去總數的數字？

Question

這是我的代碼：

 function credit() { //storing value of grandTotal in txtGrandTotal. var txtGrandTotal = $("#txtGraTot").val(); //here resetting value of grandTotal to 0.00 var txtGraTotal = document.getElementById('txtGraTot').value = '0.00'; //entering deduction amount var txtCredit = document.getElementById('txtCreditAmt').value; //subtracting values var lclRes = (parseFloat(txtGrandTotal) - parseFloat(txtCredit)).toFixed(2); //again storing values to Textbox GrandTotal $("#txtGraTot").val(lclRes); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="txtCreditAmt" oninput="credit();"> <input type="text" id="txtGraTot"> 

結果與我預期的不同。 如果我在txtCredit輸入框中輸入3 ， txtCredit總計中扣除的值是txtCredit 100 - 3 = 97 。 但是，如果我再次輸入dot（。），則結果為97 - . = 94 97 - . = 94 。 為什么會這樣呢？

Answer 1

我不確定這是否是您想要的，但這應該是有道理的。

已編輯

添加功能后，按Enter鍵，即可計算並重置txtCreditAmt。

 function credit(){ //subtracting values var lclRes = (parseFloat($("#txtGraTot").val()) - parseFloat($("#txtCreditAmt").val())).toFixed(2); //again storing values to Textbox GrandTotal $("#txtGraTot").val(lclRes); } $('#txtCreditAmt').keypress(function(e){ if (e.keyCode == 13) { credit(); $("#txtCreditAmt").val(''); return false; } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="txtCreditAmt" onblur="credit();"> <input type="text" id="txtGraTot" value="100"> 

Answer 2

問題是您沒有將總計的原始值存儲在單獨的變量中。 因此，當input事件觸發時，它每次都會更新總計。 這是怎么回事：

                  Grand total     Credit
Original state:        100          ___
Press 3       :         97           3      oninput invoked, grand total = (100 - 3)
Press .       :         94           3.     oninput invoked, grand total = (97 - 3.)

快速簡便（但不理想）的解決方案是將總計的原始值存儲在單獨的變量中，並在每次input事件觸發時使用該值。 我的解決方案是將該值存儲在data-total屬性（ $("#txtGraTot").data("total") ）中，但是您可以在其中添加其他內容。 只要確保您是從原始值中減去，而不是從文本框中的當前值中減去。

// Save the original value of grand total in an attribute for future use.
if ($("#txtGraTot").data("total") === undefined) {
  $("#txtGraTot").data("total", txtGrandTotal);
} else {
  // else, get the original grand total value.
  txtGrandTotal = $("#txtGraTot").data("total");
}

 function credit(){ //storing value of grandTotal in txtGrandTotal. var txtGrandTotal = $("#txtGraTot").val(); // Save the original value of grand total in an attribute for future use. if ($("#txtGraTot").data("total") === undefined) { $("#txtGraTot").data("total", txtGrandTotal); } else { // else, get the original grand total value. txtGrandTotal = $("#txtGraTot").data("total"); } //here resetting value of grandTotal to 0.00 var txtGraTotal = document.getElementById('txtGraTot').value = '0.00'; //entering deduction amount var txtCredit = document.getElementById('txtCreditAmt').value; //subtracting values var lclRes = (parseFloat(txtGrandTotal) - parseFloat(txtCredit)).toFixed(2); //again storing values to Textbox GrandTotal $("#txtGraTot").val(lclRes); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type="text" id="txtCreditAmt" oninput="credit();"> <br> <input type="text" id="txtGraTot">