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

这是我第一次使用外部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 */

最佳答案

无论您的代码中有哪些印刷错误，我都会提到一些其他错误：

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。

祝您学习顺利l