Uncaught TypeError: Cannot read property 'toFixed' of undefined

javascript onclick syntax-error tofixed

10,527

Solution 1

futureValue is only given a value in the event that the i <= yearsAmount loop executes at least once. However, it isn't executing even once: this is because yearsAmount will always be undefined. Why? Let's take a look at how this function gets called:

var futureValue = calculateFV(investment, interest, years);

This is where calculateFV is called, so years must be undefined. years is just the parameter yearsAmount from your processEntries header:

var processEntries = function(investmentAmount, interestRate, yearsAmount) {

So we know processEntries got called with an undefined third argument.

This line is the culprit:

$("calculate").onclick = processEntries;

An element's onclick event only gets called with one argument: the event object. The code doesn't know you want it to pass the values of the input boxes labeled investment, interest, and years. So, instead of three numbers, you get one event object and two undefined values. Instead you need to select these elements and get their values in processEntries yourself.

That would look something like this:

var processEntries = function(event) { //notice only the event will be given
    //text box values will be strings, so convert to number with Number()
    var investment = Number($("investment").value);
    var interest = Number($("rate").value);
    var years = Number($("years").value);

    var futureValue = calculateFV(investment, interest, years);
    $("calculate").value = futureValue;
};

Solution 2

TypeError: Cannot read property 'toFixed' of undefined

Following code to fix the above error.

var test = 12.520;
console.log(Number(test).toFixed(2));

Solution 3

In some cases when we bind the data directly in html, there is a chances like it may take sometime to load, so we may get the above error.

In my case I used "?" operator

for ex:- customer.price?.toFixed(2)

10,527

Sarah Cohen

Updated on June 04, 2022

Comments

Sarah Cohen almost 2 years

I know that others have had this error thrown but I think I have some sort of syntax problem that's causing this to happen for me. If you can find it I would be grateful. I'm new to JavaScript and have been staring at this simple program for an hour.

Here's the JavaScript:

"use strict";
var $ = function(id) {
    return document.getElementById(id);
};

var calculateFV = function(investmentAmount, interestRate, yearsAmount) {
    var futureValue;

    //get the future value after the amount of years entered
    for (var i = 1; i <= yearsAmount; i++ ) {
        var interest = futureValue * interestRate / 100;
        futureValue = futureValue + interest;
    }

    return futureValue.toFixed(2);
};

var processEntries = function(investmentAmount, interestRate, yearsAmount) {
    var investment = investmentAmount;
    var interest = interestRate;
    var years = yearsAmount;

    var futureValue = calculateFV(investment, interest, years);
    $("calculate").value = futureValue;
};

window.onload = function() {
  $("calculate").onclick = processEntries;  
};

And here's the 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"><br>

     <label for="rate">Annual Interest Rate:</label>
     <input type="text" id="rate">%<br>

     <label for="years">Number of Years:</label>
     <input type="text" id="years"><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>

Thanks so much!

Taplar over 4 years

Nvm, you're not doing jQuery. In any case, the issue with the onclick only passing in the event remains the primary issue
Dominik Matis over 4 years

futureValue will be undefined if yearsAmount if less than or equal 1 because of the for loop
glitch over 4 years

Does it help initializing futureValue like so var futureValue = 0;?
Sarah Cohen over 4 years

@Taplar , can you please explain what you mean? I don't understand. Thanks!
Taplar over 4 years

When you assign an event handler (ex. someElement.onclick = function), the main thing that is passed into the method when the event happens is the event object. Not any other expected parameters you put on the callback. The first parameter will be the event. If you want to pass other things in, you either have to call the method yourself with the arguments, or use bind() to change what is passed in by default
Sarah Cohen over 4 years

@glitch I tried that but no...
Ethan Harris over 4 years

looks like either futureValue or interest resulted in Undefined, to ensure that this does not return Undefined, i would replace the line with futureValue.toFixed(2); with let a = futureValue ? futureValue : 0; a.toFixed(2);

Sarah Cohen over 4 years

AH, I just realized that you're right I never got the values from the text boxes. I'm sure that'll help me fix it, thank you!
Sarah Cohen over 4 years

there's no error anymore, thanks so much for the great explanation!
Емил Цоков about 2 years

straight to the point working solution