javascript - 如何在 JS 中操作输入值以在我的 HTML 中重新显示

Question

我想在 HTML 中获取输入的数字值(每次它被用户更改)，用该值做一些数学公式，然后在页面上重新输出数据(无需重新加载)。

我的 HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

QTY: <input type="number" name="qty"  value="1" min="0" max="100" id="qty" ><br>
$<span id="total"></span>

我的JS:

<script>
var qty = 1;
var total; 
qty =  setInterval(function() {ObserveInputValue($('#qty').val()); }, 300);

total = qty * 85;
$("#total").html(total);
</script>

和 JS fiddle : https://jsfiddle.net/bcxL3usw/

不确定我的错误在哪里。我想我可能必须将 $("#total").html(total); 放在 setInterval 函数中，但似乎没有任何效果。

谢谢

Answer 1

setInterval(function() { 
$("#total").text($('#qty').val()*85);
}, 300);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
QTY: <input type="number" name="qty"  value="1" min="0" max="100" id="qty" ><br>
$<span id="total"></span>

更新:

setInterval(function() {
  let x = 0;
  if (parseInt($('#qty').val()) < 3) {
    x = $('#qty').val() * 85;
  } else {
    x = $('#qty').val() * 100;
  }
  $("#total").text(x);
}, 300);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
QTY:
<input type="number" name="qty" value="1" min="0" max="100" id="qty">
<br>$
<span id="total"></span>