CODEWITHSUNDEEP
javascriptcsshtml
Murk
Murk

Reputation: 69

javascript mortgage calculator

I have a quick question about building this mortgage calculator. I am new to javascript but somewhat familiar with other programming languages. When I enter the values for principal, termOfLoan and APR and then I push the calculate button, nothing happens. Can anyone briefly guide me into what I am missing? This should have a really quick solution that I am overlooking. Thank you in advance.

<title>Mortgage Calculator</title>
<meta charset = "UTF-8">
<link rel = "stylesheet" href = "mortgageCalculator.css">

<script>

    function calculatePayment() {


        var principal = parseFloat(document.getElementById("principal").value);
        //principal = parseInt(principal);

        var termOfLoan = parseFloat(document.getElementById("termOfLoan").value);
        //termOfLoan = parseInt(termOfLoan);

        var annualInterestRate = parseFloat(document.getElementById("annualInterestRate").value);
        //annualInterestRate = parseFloat(annualInterestRate);
        //document.getElementById("Calculate").value = principal * annualInterestRate / (1 -(Math.pow(1 / (1 + annualInterestRate) , termOfLoan)));
        //var monthlyPayment = principal * annualInterestRate / (1 -(Math.pow(1 / (1 + annualInterestRate) , termOfLoan))); 

        var percentageRate = annualInterestRate / 1200;
        var lengthOfLoan = 12 * termOfLoan;
        var monthlyPayment = (principal * percentageRate) / (1 - (Math.pow((1 + percentageRate) , lengthOfLoan * -1))));
        monthlyPayment = monthlyPayment.toFixed(2);


        document.getElementById("payment").innerHTML = monthlyPayment;

        //document.getElementById('monthlyPayment').innerHTML = "Monthly Payment" + monthlyPayment;


    }


</script>


<h1>Mortgage Calculator</h1>
<p>Use this simple home mortgage calculator to calculate monthly payments on mortgage rates. Payment examples shown do not include amounts for taxes and insurance premiums. 
*Note: please contact your financial insitution for final monthy payments, as the can and will vary from lender to lender. This calculator should only be used for comparison purposes</p>
<form>
<table>

    <tr>
        <td class = "labels">Principal Loan Amount</td>
        <td class = "textbox"><input type = "text" id = "principal" onclick = "calculatePayment()"></td>
    </tr>
    <tr>
        <td class = "labels">Mortgage Period (years)</td>
        <td class = "textbox"><input type = "text" id = "termOfLoan" onclick = "calculatePayment()"></td>
    </tr>
    <tr>
        <td class = "labels">Annual Interest Rate</td>
        <td class = "textbox"><input type = "text" id = "annualInterestRate" onclick = "calculatePayment()"></td>
    </tr>
    <tr>
        <td class = "labels">Monthly Mortgage Payment</td>
        <td class = "textbox"><input type = "number" id = "payment" name = "monthlyPayment"></td>

    </tr>
    <tr>
        <td class = "button"><button onclick = "calculatePayment()">Calculate</button></td>
        <td class = "button"><input type = "reset" name = "Reset"></td>
    </tr>


</table>
</form>

Upvotes: 2

Views: 5893

Answers (1)

Madhawa Priyashantha
Madhawa Priyashantha

Reputation: 9880

working example https://jsfiddle.net/w4an90nr/

payment is a input tag so you have to use value not innerHTML

document.getElementById("payment").value = monthlyPayment; //value not innerHTML

also there is a additional wrong closing parenthesis ) here .remove it

var monthlyPayment = (principal * percentageRate) / (1 - (Math.pow((1 + percentageRate) , lengthOfLoan * -1)));

Upvotes: 2

Related Questions