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
– Neil Thompson, Commented Jun 28, 2016 at 7:22
you have several typos in your code, please have a look at the console in browser — Guillaume
– Guillaume, Commented Jun 28, 2016 at 7: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
– Freddy Bausley, Commented Jun 28, 2016 at 7:55

Angel Politis · Accepted Answer · 2016-06-28 08:09:42Z

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, 2016 at 8:09

answered Jun 28, 2016 at 8:01

Angel Politis

11.4k15 gold badges51 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Freddy Bausley Over a year ago

Thank you so much. I didnt know there was a difference between a function and a method

Angel Politis Over a year ago

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: stackoverflow.com/a/155655/6313073

Freddy Bausley Over a year ago

for some reason when i try to run it in my IDE the javascript isnt running.

Angel Politis Over a year ago

What's your IDE? Eclipse?

Freddy Bausley Over a year ago

No Komodo X is the IDE

|

Collectives™ on Stack Overflow

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

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related