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

Question

This is my first time using an external javascript file. 这是我第一次使用外部javascript文件。 I am doing the exercise in the murach series of books on Javascript and I am stuck on some pretty basic things. 我正在编写有关Javascript的murach系列丛书中的练习，并且坚持一些非常基本的知识。 I will show the javascript coding i did then i will show you the html file. 我将显示我执行的javascript编码，然后向您显示html文件。 Whenever i click the button to calculate the future value it does nothing even though i have the onload event handler. 每当我单击按钮以计算将来值时，即使我具有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

Regardless of the typographic errors in your code, there are some other mistakes you do I would like to mention: 无论您的代码中有哪些印刷错误，我都会提到一些其他错误：

parseInt() is a function; parseInt()是一个函数； not a method. 不是一种方法。 Therefore it must be used as a function. 因此，必须将其用作功能。 Like so: investment = parseFloat($("investment").value); 像这样： investment = parseFloat($("investment").value); instead of: 代替：
investment = $("investment").parseFloat($("investment").value);
$("future_value") is the textbox; $("future_value")是文本框； not it's value. 不是它的价值。 To actually have something appear in $("future_value") , you have to say: $("future_value").value = investment . 要在$("future_value")实际显示某些内容，您必须说： $("future_value").value = investment 。
Your calculateFV() function should not have any parameters. 您的calculateFV()函数不应具有任何参数。 Investment , interest and years are local variables inside the function, so your function doesn't require any input. Investment ， interest和years是函数内部的局部变量，因此您的函数不需要任何输入。
You parse too much and carelessly. 您解析得太多，而且粗心。 In your code you say: cInterest = parseFloat(cInterest); 在您的代码中，您说： cInterest = parseFloat(cInterest); and futureValue = parseFloat(futureValue); 和futureValue = parseFloat(futureValue);
• We use parseFloat() to parse a string. •我们使用parseFloat()解析字符串。 The above variables contain arithmetic values that occurred after a mathematical operation and not strings. 以上变量包含在数学运算之后而不是字符串之后出现的算术值。 Therefore you do not need to parse them. 因此，您无需解析它们。

I created a jsFiddle with your code corrected and properly functioning. 我创建了一个jsFiddle，其中您的代码已更正且可以正常运行。 You can find it here . 你可以在这里找到它。

Good luck in your learning process ☺ 祝您学习顺利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