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のフィドル： 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機能がお手伝いしますし、またスパンで、あなたはまた、純粋なJavaScriptとイベントリスナーでそれをしたいかもしれませんhtmlまたはtext() https://jsfiddle.net/bcxL3usw/8/

Answer 3

val()使用を使用していない：

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

代わりに非常にクリーンな方法とeffecientは、それが必要とされていない場合にデータを追加するために想起されるだろう間隔のchangeイベントを使用することができます。

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

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

DEMO

Answer 5

このコードを試してみてください。.. あなたのコードとの大きな違いは、その計算ロジックを関数に移したばかりではありません。

var qty = 1;

var total;

setInterval(function() {ObserveInputValue($('#qty').val())}, 300);

function ObserveInputValue(qty){

total = qty * 85;

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

}