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>

Amount和Penalty是需要添加的两个输入字段。我设法将它们相加，相加的结果实现了，但是当我尝试将它们相减时，它没有给我正确的结果。减去后退键，但不能给我正确的减法结果。如何处理并带来正确的总数？

Answer 1

我不确定您对keydown处理程序的期望是什么...我也不知道<select>。

但是关于您的评论：

我可以在输入字段中的每一个数字更改中进行全部更改吗？

这是我要使加法始终正确的方法：

$(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 个答案: