2016-11-18 58 views
0

我正在嘗試基於表單字段的輸入配置實時調用程序。 我的問題是,我根本無法弄清楚如何在網站上顯示結果。實時javascript計算

<label class="contactform-label" for="contactform-member"><span class="contact_form_span">Member*:</span> </label> 
<input class="contactform-input" type="text" id="contactform-member" placeholder="Member" name="member" value="" /> 
<span id="member-kosten"> 
    <script type="text/javascript">document.write(ausgabe)</script> 
</span> 



var price = 90; 
var member = document.getElementById("contactform-member").value; 
var calculate = Math.sqrt(price * member); 
var ausgabe = (calculate); 
+0

@RuchishParikh通常這些標籤不會顯示在SO代碼示例中。事實上,它們不是必需的,並且最好省略。 – 2016-11-18 12:22:05

+0

重複的問題:http://stackoverflow.com/questions/13696679/outputting-a-live-calculation-based-on-field-values-in-a-form – MYGz

回答

2

使用此代碼:

function fun(){ 
 
var price = 90; 
 
var member = document.getElementById("contactform-member").value; 
 
var calculate = Math.sqrt(price * member); 
 
var ausgabe = (calculate); 
 
document.getElementById("member-kosten").innerHTML = ausgabe; 
 
    }
<label class="contactform-label" for="contactform-member"><span class="contact_form_span">Member*:</span> </label> 
 
<input class="contactform-input" type="text" id="contactform-member" placeholder="Member" name="member" value="" onkeyup="fun()" /> 
 
<span id="member-kosten"> 
 
    
 
</span>

+0

這段代碼的問題與我所看到的和經驗一樣,它不會顯示已經在開始時輸入的「成員」的結果。我的意思是,在你輸入「1」之後,你將會得到「0」的結果,然後計算才真正開始。輸入「2」後,您將得到前一會員輸入結果「90」的結果。 –

+0

你能解釋一下計算嗎?你需要加上價值,如果我輸入10,並讓結果來到20,然後我將輸入從10改變爲15,那麼結果將是20 + 30 = 50,30將從15得到,並且prev是20. – RJParikh

+0

我需要它會立即顯示。如果我輸入「1」,我立即需要「90」彈出。目前似乎有一個階段進入價值的延遲。目前它總是會計算輸入的最後一個數字。 –

1

從腳本(最後一行)設置元素member-kosten的HTML:

var price = 90; 
 
var member = document.getElementById("contactform-member").value; 
 
var calculate = Math.sqrt(price * member); 
 
document.getElementById("member-kosten").innerHTML = calculate;
<label class="contactform-label" for="contactform-member"><span class="contact_form_span">Member*:</span> </label> 
 
<input value="10" class="contactform-input" type="text" id="contactform-member" placeholder="Member" name="member" value="" /> 
 
<span id="member-kosten"> 
 
</span>

+0

我檢查了你的小提琴,但你的代碼不像動態。我在同一時間從輸入改變價值結果沒有改變。 – RJParikh

+1

如果可能,請嘗試使用代碼片段,就像@Ruchish所做的那樣。片段的工作方式與JSFiddle非常相似,但是可以在SO中在線工作。只需點擊< >標籤即可。 – Keith