Question

这是我第一次使用外部javascript文件。我正在关于Javascript的murach系列书籍中进行练习，我被困在一些非常基本的东西上。我将展示我做的javascript编码然后我会告诉你html文件。每当我点击按钮来计算未来值时，即使我有onload事件处理程序，它也什么都不做。

   /*Javascript*/
    var $ = function(id) {
return document.getElementById(id);
};

    function calculateFV(investment, interest, years) {]{

    investment =  $("investment").parseFloat($("investment").value);
    interest =  $("annual_rate").parseFloat($("annual_rate").value);
    years = $("years").parseInt($("years").value);

   var cInterest = investment * interest;

   cInterest = parseFloat(cInterest);
             futureValue = parseFloat(futureValue);
        for (var i = 1; i < years; i++) {
            investment = investment + (cInterest / 100);
             }
           investment = parseFloat(investment).toFixed(2);

   $ ("future_value") = investment;
}

window.onload = function() {
$("calculate").onclick = calculateFV;
$("investment").focus();
 };
 /* End of Javascript */

  /* HTML */
  <!DOCTYPE html>
  <html>
  <head>
      <meta charset="UTF-8">
      <title>Future Value Calculator</title>
      <link rel="stylesheet" href="future_value.css">
      <script src="future_value.js"></script>
  </head>

    <body>
        <main>
          <h1>Future Value Calculator</h1>

          <label for="investment">Total Investment:</label>
          <input type="text" id="investment">
          <span id="investment_error">&nbsp;</span><br>

          <label for="rate">Annual Interest Rate:</label>
          <input type="text" id="annual_rate">
          <span id="rate_error">&nbsp;</span><br>

          <label for="years">Number of Years:</label>
          <input type="text" id="years">
          <span id="years_error">&nbsp;</span><br>

          <label for="future_value">Future Value:</label>
          <input type="text" id="future_value" disabled><br>

          <label>&nbsp;</label>
          <input type="button" id="calculate" value="Calculate"><br>      
      </main>
      </body>
      </html>

    /* End of HTML */

Answer 1

无论您的代码中是否存在排版错误，您还有其他一些错误我想提及：

parseInt()是一个函数;不是一种方法。因此必须将其用作功能。像这样：investment = parseFloat($("investment").value); 而不是：
investment = $("investment").parseFloat($("investment").value);
$("future_value")是文本框;不是它的价值。要在$("future_value")中实际显示某些内容，您必须说：$("future_value").value = investment。
您的calculateFV()函数不应包含任何参数。 Investment，interest和years是函数内的局部变量，因此您的函数不需要任何输入。
你解析太多，不小心。在您的代码中，您说：cInterest = parseFloat(cInterest);和futureValue = parseFloat(futureValue);
•我们使用parseFloat()来解析字符串。上述变量包含在数学运算后发生的算术值，而不是字符串。因此，您无需解析它们。

我创建了一个jsFiddle，你的代码已得到纠正并正常运行。你可以找到它here。

祝你学习顺利☺

如何在HTML中使用外部Javascript文件中的函数？

1 个答案: