不显示计算结果答案

【问题标题】：Result of the Calculation is not displayed不显示计算结果
【发布时间】：2019-04-06 11:33:02
【问题描述】：

我有一个 jquery 代码来计算总金额。

$("#quantity").on("change keyup paste", function() {
  var quantity = $(this).val();
  //$('#display').text(quantity);
})

$("#buy").on("change keyup paste", function() {
  var buy = $(this).val();
})

var total_amnt = (((quantity * buy) * 5) / 100) + (quantity * buy);
$('#tot_amnt_display').text(total_amnt);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table class="table">
  <tbody>
    <tr style="text-align: center;">
      <td>Quantity</td>
      <td>Buy</td>
    </tr>
    <tr>
      <td><input type="number" class="form-control" id="quantity" placeholder="Quantity" name="quantity"></td>
      <td><input type="number" class="form-control" id="buy" placeholder="Buy Amount" name="buy"></td>
    </tr>
  </tbody>
</table>
<table class="table table-bordered table-dark">
  <tbody>
    <tr>
      <td>Total Amount</td>
      <td><span id="tot_amnt_display"></span></td>
    </tr>
  </tbody>
</table>

在上述代码的结果中，它只显示了 NaN。

页面加载关于在输入框中输入值！

【问题讨论】：

您尝试过什么来调试问题？检查输入是否正确读取或计算的哪些部分出错应该不会太难

标签： javascript jquery html

【解决方案1】：

值的默认类型是字符串类型，你应该将值转换为数字。此外，您不需要多个事件处理程序，只需传递以逗号分隔的 id。

试试下面的方法：

$("#quantity, #buy").on("change keyup paste", function() {
  var quantity = Number($('#quantity').val());
  var buy  = Number($("#buy").val());
  var total_amnt = (((quantity * buy) * 5) / 100) + (quantity * buy);
  $('#tot_amnt_display').text(total_amnt);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table class="table">
  <tbody>
    <tr style="text-align: center;">
      <td>Quantity</td>
      <td>Buy</td>
    </tr>
    <tr>
      <td><input type="number" class="form-control" id="quantity" placeholder="Quantity" name="quantity"></td>
      <td><input type="number" class="form-control" id="buy" placeholder="Buy Amount" name="buy"></td>
    </tr>
  </tbody>
</table>
<table class="table table-bordered table-dark">
  <tbody>
    <tr>
      <td>Total Amount</td>
      <td><span id="tot_amnt_display"></span></td>
    </tr>
  </tbody>
</table>

【讨论】：