Question

这里的新人。我有一种感觉，这是一个非常基本的问题，但是我无法通过这个Jquery代码将函数的输出写入html并让它显示出来。我认为这是脚本的一个问题，但不确定我是否也在使用html做错了。

此功能的目标是创建一个计算器，根据用户输入的内容给出未来的投资价值。当我点击提交时，它曾用于更改所有的html以显示“NaN＆＃39;但是现在当我点击提交按钮时，它会清除输入框但是没有给我任何数字或任何答案，即使我相信我已将其设置为显示数字

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);

Answer 1

以下是您的修复：

＆＃13;

$('#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;
});

＆＃13;

<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>

＆＃13;

您必须计算click事件中的值并分配给result。计算利息的公式也是不正确的。

Answer 2

尝试以下代码，基本上你需要：计算cb click中的变量，然后在div #result中输出resut。使用.val获取输入值和event.preventDefault()以避免表单提交（这是浏览器的默认行为）。

＆＃13;

$('#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();
});

＆＃13;

<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>

＆＃13;

无法让Jquery将函数的输出写入html

2 个答案: