How to use a function in an external Javascript file in HTML?

Question

This is my first time using an external Javascript file. I am doing the exercise in the murach series of books on Javascript and I am stuck on some pretty basic things. I will show the Javascript coding i did then i will show you the html file. Whenever I click the button to calculate the future value it does nothing even though I have the onload event handler.

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

in the browser use the developer tools to see the errors (there are typos) — Neil Thompson, Jun 28 '16 at 07:22
you have several typos in your code, please have a look at the console in browser — Guillaume, Jun 28 '16 at 07:26
Yeah it says my parseFloat is not a function. So what do i doto fix the problems. Guys im a beginner i just finished chapter 4 of the book. — Freddy Bausley, Jun 28 '16 at 07:55

Angel Politis · Accepted Answer · 2016-06-28T08:09:42.320

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; not a method. Therefore it must be used as a function. Like so: investment = parseFloat($("investment").value); instead of:
investment = $("investment").parseFloat($("investment").value);
$("future_value") is the textbox; not it's value. To actually have something appear in $("future_value"), you have to say: $("future_value").value = investment.
Your calculateFV() function should not have any parameters. Investment, interest and years are local variables inside the function, so your function doesn't require any input.
You parse too much and carelessly. In your code you say: cInterest = parseFloat(cInterest); and futureValue = parseFloat(futureValue);
• We use parseFloat() to parse a string. 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. You can find it here.

Good luck in your learning process ☺

edited Jun 28 '16 at 08:09

answered Jun 28 '16 at 08:01

Angel Politis

10,955
14
48
66

1

Thank you so much. I didnt know there was a difference between a function and a method – Freddy Bausley Jun 28 '16 at 08:16
Be sure to check it out as in more complex projects such errors will be difficult to find out. Check out this Stack Overflow answer to learn more: http://stackoverflow.com/a/155655/6313073 – Angel Politis Jun 28 '16 at 08:18
for some reason when i try to run it in my IDE the javascript isnt running. – Freddy Bausley Jun 28 '16 at 08:19
What's your IDE? Eclipse? – Angel Politis Jun 28 '16 at 08:21
No Komodo X is the IDE – Freddy Bausley Jun 28 '16 at 08:22
Have you linked your JS file in your HTML one like: ``? – Angel Politis Jun 28 '16 at 08:24
Yes i linked it to the javascript. Its saying there is something wrong with the last function in the javascript. check the javascript that the person who answered my question. I copied that to the IDE. – Freddy Bausley Jun 28 '16 at 08:29

How to use a function in an external Javascript file in HTML?

1 Answers1