Блог

Главная - Вопросы по программированию - Результат вычисления не отображается

Результат вычисления не отображается

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

У меня есть код 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.

При Загрузке страницы при вводе значений в поле ввода!

Комментарии:

1. И что вы пытались отладить проблему? Не должно быть слишком сложно проверить, правильно ли считываются входные данные или какие части вычисления идут неправильно

Ответ №1:

Тип значения по умолчанию — тип string, вы должны преобразовать значение в number. Также вам не нужен множественный обработчик событий, просто передайте идентификаторы, разделенные запятой.

Попробуйте следующий способ:

 $("#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>