Javascript计算器不减去后退按键

Question

 var total = 0; $(document).ready(function() { $('select').on('change', function() { alert(this.value); }); $(".amount").change(function() { var amount = $(".amount").val(); console.log(amount); total = total + parseInt(amount); console.log(total); $("#total").html(total); }); $(".penalty").change(function() { var penalty = $(".penalty").val(); console.log(penalty); total = total + parseInt(penalty); console.log(total); $("#total").html(total); }); }); $(document).on('keydown', function(event) { if (event.keyCode == 8) { // Prevent default (disable the back button behavior) /*event.preventDefault();*/ var amount = $(".amount").val(); console.log("amount is"); console.log(amount); total = total - parseInt(amount); console.log(total); $("#total").html(total); // Your code } });

 <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/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.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <select class="form-control col-md-6"> <option value="1">Customs</option> <option value="2">VAT</option> <option value="3">Excise</option> <option value="4">Others</option> </select> <!--div for customs!--> <div class="form-group row" id="forCustoms"> <label class="col-xs-3 col-form-label mr-2">Reason</label> <div class="col-xs-9"> <input type="text" class="form-control" id="reason" name="reason"> </div> <label class="col-xs-3 col-form-label mr-2">Amount</label> <div class="col-xs-9"> <input type="text" class="form-control amount" id="amount" name="amount"> </div> <label class="col-xs-3 col-form-label mr-2">Penalty</label> <div class="col-xs-9"> <input type="text" class="form-control penalty" id="penalty" name="penalty"> </div> </div> <!--div for customs! ends--> <div class="col-md-12"> Total : <p id="total"></p> </div> </div> </body>

The Amount and Penalty are the two input field that needs to be added.I managed to add them and the result of addition is coming true but when i tried to subtract them,it is not giving me correct result.i tried to subtract on back key press but it is not giving me correct subtraction result.How to handle and bring the correct total? Amount和Penalty是需要添加的两个输入字段。我设法将它们相加，加法的结果实现了，但是当我尝试减去它们时，它没有给我正确的结果。按键，但不能给我正确的减法结果。如何处理并带来正确的总数？

Answer 1

I'm not sure what you expect from the keydown handler... And I don't know about the <select> either. 我不确定您对keydown处理程序的期望是什么...而且我也不知道<select> 。

But about your comment: 但是关于您的评论：

can i make the total change in every single change in digit in input field? 我可以在输入字段中的每一个数字更改中进行总更改吗？

Here is how I would make the addition always correct: 这是我使添加始终正确的方法：

 $(document).ready(function() { $(".amount, .penalty").change(function() { var total = 0; var amount = parseInt($(".amount").val()) || 0; console.log("amount: "+amount); var penalty = parseInt($(".penalty").val()) || 0; console.log("penalty: "+penalty); total = amount + penalty; console.log(total); $("#total").html(total); }); });

 <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/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.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <select class="form-control col-md-6"> <option value="1">Customs</option> <option value="2">VAT</option> <option value="3">Excise</option> <option value="4">Others</option> </select> <!--div for customs!--> <div class="form-group row" id="forCustoms"> <label class="col-xs-3 col-form-label mr-2">Reason</label> <div class="col-xs-9"> <input type="text" class="form-control" id="reason" name="reason"> </div> <label class="col-xs-3 col-form-label mr-2">Amount</label> <div class="col-xs-9"> <input type="text" class="form-control amount" id="amount" name="amount"> </div> <label class="col-xs-3 col-form-label mr-2">Penalty</label> <div class="col-xs-9"> <input type="text" class="form-control penalty" id="penalty" name="penalty"> </div> </div> <!--div for customs! ends--> <div class="col-md-12"> Total : <p id="total"></p> </div> </div> </body>

Javascript计算器不减去后退按键

问题描述

1 个解决方案

解决方案1
1 2019-02-23 17:30:04

Javascript计算器不减去后退按键

问题描述

1 个解决方案

解决方案1 1 2019-02-23 17:30:04

解决方案1
1 2019-02-23 17:30:04