NaN JavaScript Function

Question

I've been ripping my hair out all day long trying to figure out this stupid bug. Can anybody help me? I'm creating a Loan Calculator in JavaScript for my programming class. For some reason, my "computePayoff" function is returning a "NaN" error, and I don't know why. I think it's on line 65. Can anyone help? I'm new to programming (obviously), so many many thanks in advance.

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<title>Loan Calculator</title>

<!--Input
        The user enters the required information and clicks on "Compute Payment"
    Processing
        The computer calls the correct function depending on the button pressed
    Output
        The monthly payment and/or the total payoff cost is sent to the screen.
-->

<script>
// This function is called when the "Compute Payment" button is clicked
function calculatePayment() {
    // Pulling values from the HTML fields and placing them into variables
    var principal = parseFloat(document.getElementById('principal').value);
    var annualRate = parseFloat(document.getElementById('interestrate').value);
    var years = parseFloat(document.getElementById('years').value);
    var periodsPerYear = parseFloat(document.getElementById('paymentsperyear').value);
    var numberOfPaymentsPaidToDate = parseFloat(document.getElementById('paymentstodate').value);

    // Calling another function to do the math calculations,
    // and then outputs it to an HTML form
    var paymentFinal = computePayment(principal, annualRate, years, periodsPerYear);
    document.getElementById("monthlypayment").value = paymentFinal;
}

function computePayment(principal, annualRate, years, periodsPerYear) {
    // All this math is to solve the equation: f = a(1+r)^n
    var rate = (annualRate / periodsPerYear) / 100;
    var lifeOfLoan = (years * periodsPerYear);
    var exponent = ((years * periodsPerYear) * -1);
    var topHalf = (principal * rate);
    var bottomHalf = 1 - (Math.pow((1 + rate), exponent));

    // The payment information is sent back to the "paymentFinal" variable
    var payment = "$" + (topHalf/bottomHalf).toFixed(2);
    return payment;
}

function calculatePayoff () {
    // Pulling values from the HTML fields and placing them into variables
    var principal = parseFloat(document.getElementById('principal').value);
    var annualRate = parseFloat(document.getElementById('interestrate').value);
    var years = parseFloat(document.getElementById('years').value);
    var periodsPerYear = parseFloat(document.getElementById('paymentsperyear').value);
    var numberOfPaymentsPaidToDate = parseFloat(document.getElementById('paymentstodate').value);

    // Calling another function to do the math calculations,
    // and then outputs it to an HTML form
    var payoffFinal = computePayoff(principal, annualRate, years, periodsPerYear, numberOfPaymentsPaidToDate);
    document.getElementById("totalpayoff").value = payoffFinal;
}

function computePayoff(principal, annualRate, years, periodsPerYear, numberOfPaymentsPaidToDate) {
    // All this math is to solve the equation: b = a(1+r)^n - p((1+r)^n - 1) / r
    var r = (annualRate / periodsPerYear) / 100; // Check!
    var n = numberOfPaymentsPaidToDate;
    var payments = computePayment(principal, annualRate, years, periodsPerYear); // Check!

    var payoff = (principal * (Math.pow((1 + r), n))) - (payments * (Math.pow((1 + r), n) - 1)) / r;
    return payoff;
}

    // This function is used to clear all the fields to blank
function resetForms() {
    document.getElementById('forms').reset();
}
</script>

</head>

<body>
<!-- Title -->
<h1>Loan Calculator</h1>
<hr>

<!-- I placed everything in a table so that it aligns correctly, 
and just looks a little bit cleaner and neater-->
<div>
<form id="forms">
    <table width="350px">
        <tr>
            <td>Amount Borrowed (Principal):</td>
            <td> <input type="text" id="principal" size="5"></td>
        </tr>
        <tr>
            <td>Annual Interest Rate (Example: 4.03%):</td>
            <td><input type="text" id="interestrate" size="3"></td>
        </tr>
        <tr>
            <td>Number of years:</td>
            <td><input type="text" id="years" size="2"></td>
        </tr>
        <tr>
            <td>Payments per year:</td>
            <td><input type="text" id="paymentsperyear" size="2"></td>
        </tr>
        <tr>
            <td><button type="button" onclick="calculatePayment()">Compute Payment</button></td>
            <td><input type="text" id="monthlypayment" size="5"></td>
        </tr>
        <tr>
            <td>Number of payments made to date:</td>
            <td><input type="text" id="paymentstodate" size="3"></td>
        </tr>
        <tr>
            <td><button type="button" onclick="calculatePayoff()">Total payoff amount</button></td>
            <td><input type="text" id="totalpayoff" size="7"></td>
        </tr>
        <tr>
            <td><input type="button" onclick="resetForms()" value="Reset"></td>
            <td></td>
        </tr>
    </table>
    <div id="output"></div>
</form>
</div>

</body>
</html>

Welcome to StackOverflow! You should better use a fiddler for that and in genral it is always a good idea to mark that line with a comment. — rekire
– rekire, Commented Nov 28, 2013 at 11:13

Kai Döhler · Accepted Answer · 2013-11-28 11:21:30Z

1

Your method computePayments returns the value with an added dollar sign, therefore making it a string. With this computePayoff() fails in line 65.

so change line 41 to:

var payment = (topHalf/bottomHalf).toFixed(2);

and it will work

answered Nov 28, 2013 at 11:21

Kai Döhler

763 bronze badges

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

2 Comments

user2985455 Over a year ago

Oh my goodness! That did it! Thank you SO much. Really appreciate that!

Ely Over a year ago

@user2985455 Why didn't you accept the answer ? It solved your problem, din't it ?

Collectives™ on Stack Overflow

NaN JavaScript Function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related