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>金额和罚金是需要添加的两个输入字段。我设法添加它们并且添加的结果即将实现，但是当我尝试减去它们时，它没有给我正确的结果。我尝试了按后退键减去，但它没有给我正确的减法结果。如何处理并得出正确的总数？
最佳答案
我不确定您对 keydown 有什么期望处理程序...我不知道 <select>要么。
但是关于您的评论:
can i make the total change in every single change in digit in input field?
以下是我如何使添加始终正确:
$(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计算器不按后退键按钮进行减法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54843894/