2017-02-24 13 views
0

番号を入力して計算するたびに自動的に表示する方法を教えてください。入力番号を表示して計算する

その後ピックボタン

<br> Layer <input type="number" min="1" id="cake_layer" name="cake_layer" /> <!-- onchange="updateTotal()" --> 
 
    <input type="button" value="Pick" id="choose" /> 
 
    
 
    <br> 
 
    Layer inputed <div class="layer_display"> </div> 
 
    <br> 
 
    Layer Amount <div class="layer_amt"> </div>

私は本当に必要なので、その2層ならば、それは200になります私の基本価格は100になり、価格を計算するためにトリガされます助けて。ありがとうございました !!!

+1

uがStackOverflowのにディスプレイ 'によってすべてのtime' –

+0

ようこそ何を意味するのでした!私たちがあなたのお手伝いをするために、あなたの質問を更新して、関連するすべてのコードを[最小限の、完全で検証可能な例で]表示してください(http://stackoverflow.com/help/mcve)。また、あなたの問題を解決するためにこれまでに試したことをお知らせください。詳細については、良い質問をする方法について[ヘルプ記事](http://stackoverflow.com/help/how-to-ask)を参照してください。 –

答えて

1

は、あなたが何をしたいのか、このですか?

var cakeLayer = document.getElementById("cake_layer"), 
 
    price = 100, 
 
    layerDisplay = document.getElementsByClassName("layer_display")[0], 
 
    layerAmt = document.getElementsByClassName("layer_amt")[0]; 
 

 
cakeLayer.onchange = function(event) { 
 
    var amount = this.value || 0, 
 
    totalPrice = amount * price; 
 

 
    layerDisplay.innerText = totalPrice; 
 
    layerAmt.innerText = amount; 
 

 
}
<input type="number" min="1" id="cake_layer" name="cake_layer" /> 
 
<!-- onchange="updateTotal()" --> 
 
<input type="button" value="Pick" id="choose" /> 
 
<br> total price 
 
<div class="layer_display"> </div> 
 
<br> Layer Amount 
 
<div class="layer_amt"> </div>

+0

これはクールです、ありがとう! – Poofbrayy

1

JavaScriptまたはjQueryを使用してこれを実現できます。これがDOMを操作する唯一の方法です。

私が作ったこの作業jsfiddleを参照してください: https://jsfiddle.net/jw6q53fz/1/

HMTL

<div> 
    <label for="cake_layer">Layer</label> 
    <input type="number" class="cake_layer" name="cake_layer" id="cake_layer"/> 
    <button id="choose">Pick</button> 
</div> 
<div> 
    <p>Layer inputed: <span class="layer_display"> </span></p> 
    <p>Layer Amount: <span class="layer_amt"> </span></p> 
</div> 

jQueryの

$('#choose').on('click', function(){ 
    var cakeLayerValue = $('#cake_layer').val(); 
    $('.layer_display').html(cakeLayerValue); 
    $('.layer_amt').html(cakeLayerValue * 100); 
}); 
+0

ありがとう、私はこれを試してみよう! – Poofbrayy

関連する問題