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

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，其中您的代码已更正且可以正常运行。 你可以在这里找到它。

祝您学习顺利l

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-06-28 08:01:51

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-06-28 08:01:51

解决方案1
1 已采纳 2016-06-28 08:01:51