Javascript calculator not subtracting on back key press button

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?

Answer 1

I'm not sure what you expect from the keydown handler... And I don't know about the <select> either.

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 calculator not subtracting on back key press button

Question

1 answers

solution1
1 2019-02-23 17:30:04

Javascript calculator not subtracting on back key press button

Question

1 answers

solution1 1 2019-02-23 17:30:04

solution1
1 2019-02-23 17:30:04