無法讓jquery將函數的輸出寫入html

新人在這裏。我有一種感覺，這是一個非常基本的問題，但我不能讓這個JQuery代碼將函數的輸出寫入html並顯示出來。我相信這是一個與腳本有關的問題，但不確定我是否在使用html做錯了什麼。無法讓jquery將函數的輸出寫入html

該功能的目標是創建一個計算器，根據用戶輸入的內容給出未來的投資價值。當我點擊提交時，它用來更改所有的html以顯示'NaN'，但現在當我單擊提交按鈕時，它會清除輸入框，但不會給我任何數字或任何答案，即使我相信我已經設定爲顯示數量

HTML

<body> 
    <div id = "futurevalue"> 
     <form> 
      <input type="radio" name="formula" value="future_investment" checked>Future Investment<br> 
      <label for="princeple">Enter the princeple amount invested:</label> 
      <input id="princeple" type="number" name="princeple" step="0.01"><br> 
      <label for="time">Enter how long the investment will be for (in years):</label> 
      <input id='time' type='number' name='time'><br> 
      <label for='rate'>Enter the expected interest rate:</label> 
      <input id='rate' type="number" name='rate'><br> 
      <input id='submit' type='submit' name='submit'> 
     </form> 
     <p>Total:</p> 
     <p id='result'></p> 
    </div>

的jQuery

$('#submit').click(function(){ 
    $('#result').html(function(){ 
     return toString(output,10); 
    }); 
}); 
var princeple = parseInt($('#princeple'),10); 
var time = parseInt($('#time'),10); 
var rate = parseInt($('#rate'),10); 
var output = (princeple * time + rate);

來源

2017-08-19 Brystephor

用['.VAL（）']（https://api.jquery.com/val/），以獲得輸入的值。 – H77

這裏是你的解決辦法：

$('#submit').click(function(){ 
 
    var princeple = parseInt($('#princeple').val()); 
 
    var time = parseInt($('#time').val()); 
 
    var rate = parseFloat($('#rate').val()/100); 
 
    var output = ((princeple * rate) * time); 
 
    $('#result').html(output); 
 
    //prevent from page reload 
 
    return false; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id = "futurevalue"> 
 
     <form> 
 
      <input type="radio" name="formula" value="future_investment" checked>Future Investment<br> 
 
      <label for="princeple">Enter the princeple amount invested:</label> 
 
      <input id="princeple" type="number" name="princeple" step="0.01"><br> 
 
      <label for="time">Enter how long the investment will be for (in years):</label> 
 
      <input id='time' type='number' name='time'><br> 
 
      <label for='rate'>Enter the expected interest rate:</label> 
 
      <input id='rate' type="number" name='rate'><br> 
 
      <input id='submit' type='submit' name='submit'> 
 
     </form> 
 
     <p>Total:</p> 
 
     <p id='result'></p> 
 
    </div>

你必須計算click事件中的價值和分配給result。計算利息的公式也是不正確的。

來源

2017-08-19 06:26:04

這適用於Stack Overflow的代碼片段，但由於某些原因，當我在實際預覽中的文檔中嘗試它時，它不起作用。它仍然沒有任何東西。我甚至複製並粘貼了信件。我添加到jQuery代碼的唯一東西是$（document）.ready（function（）{}）;並在函數的{}中包含您給我的所有代碼。 – Brystephor

你可以創建一個jsfiddle或plunkr並且檢查 –

我做了，結果很奇怪。我看到你已經添加了/ 100並稍微改變了輸出。但一旦我將這些迴歸正常，我仍然會接受奇怪的價值觀。 – Brystephor

請嘗試下面的代碼，基本上你需要：計算你的變量內cb點擊和輸出resut在你的div #result。使用.val可以獲得輸入值和event.preventDefault()以避免表單提交（這是瀏覽器的默認行爲）。

$('#submit').click(function(event) { 
 
    var princeple = parseInt($('#princeple').val(), 10); 
 
    var time = parseInt($('#time').val(), 10); 
 
    var rate = parseInt($('#rate').val(), 10); 
 
    var output = (princeple * time + rate); 
 
    $('#result').html(output); 
 
    event.preventDefault(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="futurevalue"> 
 
    <form> 
 
    <input type="radio" name="formula" value="future_investment" checked>Future Investment<br> 
 
    <label for="princeple">Enter the princeple amount invested:</label> 
 
    <input id="princeple" type="number" name="princeple" step="0.01"><br> 
 
    <label for="time">Enter how long the investment will be for (in years):</label> 
 
    <input id='time' type='number' name='time'><br> 
 
    <label for='rate'>Enter the expected interest rate:</label> 
 
    <input id='rate' type="number" name='rate'><br> 
 
    <input id='submit' type='submit' name='submit'> 
 
    </form> 
 
    <p>Total:</p> 
 
    <p id='result'></p> 
 
</div>

來源

2017-08-19 06:33:44 GibboK

This Works！謝謝！現在是時候弄清楚如何讓它在最終的輸出中計算小數而不用四捨五入。 – Brystephor

這是如何工作，我的不是？ –

@AKA在我的代碼中，我計算點擊回調中的變量，並輸出div #result中的結果。在你原來的問題中，你可以在onclick之外計算你的變量。我希望它有助於:) – GibboK

無法讓jquery將函數的輸出寫入html

回答

相關問題