如何从输入框中减去总数的数字？

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">