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小提琴： 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>

UPD：

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>

Answer 2

keyup功能会对您有帮助，而且您不会使用val()使用html或text() https://jsfiddle.net/bcxL3usw/8/

Answer 3

您可能还希望使用纯JavaScript和事件侦听器来执行此操作：

var input = document.querySelector('input');
var target = document.querySelector('#total');
var multiplier = 85;

// Copy over initial value
target.innerHTML = input.value * multiplier;

// On every keyup event, update the value
input.addEventListener('keyup', function (event) {
  target.innerHTML = event.target.value * multiplier;
});

工作示例：https://jsfiddle.net/maciejsmolinski/bcxL3usw/11/

这是你想要实现的目标吗？

Answer 4

您可以使用change事件而不是间隔，这可能是一种更清洁的方式，并且有效，然后在不需要时回忆附加数据：

$(document).on('keyup', '#qty', function(){
  var qty = $(this).val();
  var total = qty * 85;

  $("#total").html(total);
});

DEMO

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

4 个答案: