Mortgage Loan Calculator Using JavaScript

Hello Developers, in this tutorial you are going to learn a very interesting topic i.e. mortgage calculator using JavaScript. The main feature of the mortgage calculator is to calculate the monthly payment of the principal amount that is paid to the respective bank considering the rate of interest and tenor.

JavaScript Program for mortgage loan calculator

In this program the mortgage calculation is going to be done through a function ‘fn1’ that we call by a submit button in HTML file:

First in an HTML document create three input fields with id’s ‘t-1′,’t-2’, and ‘t-3’ respectively.

Now you need to create an input field button of type submit in that HTML document as shown below.

<input type="submit" value="Submit" onclick="fn1()" id="submit-button">

And now you need to create one more input filed with id ‘result’ which will display you the monthly payment results.

Make a JavaScript file and use the code below.

Now you need to create a function fn1 in .js file that includes the variables to store the loan amount, Interest rate, Tenor, and formula for mortgage calculation:

function fn1(){
    var LoanAmount = Number(document.getElementById('t-1').value);
    var InterestRate = Number(document.getElementById('t-2').value);
    var Tenor = Number(document.getElementById('t-3').value);
    var Interest = (LoanAmount * (InterestRate * 0.01)) / Tenor;
    var MonthlyPaid = ((LoanAmount / Tenor) + Interest);
    document.getElementById('result').value = MonthlyPaid;

Function fn1() {} explanation:-

  1. var LoanAmount = Number(document.getElementById('t-1').value);

    First, create a variable var LoanAmount which stores the loan amount entered by the user.

    Now you need to enter the id that is given to the first input field i.e. ‘t-1’.

  2. var InterestRate = Number(document.getElementById('t-2').value);

    Second, create another variable var InterestRate which stores the rate of interest entered by the user.

    Now you need to enter the id that is given to the first input field i.e. ‘t-2’.

  3. var Tenor = Number(document.getElementById('t-3').value);

    Third, create another variable var Tenor stores the input number entered by the user.

    Now you need to enter the id that is given to the first input field i.e. ‘t-3’.

  4. Number(document.getElementById('t-1').value);

    Now write the above line which will then get you the value of first input.

    Here, Number() converts the object argument to a number that represents the object’s value and if the value which is returned cannot be converted into a number NaN is being returned and number function also acts as a check that only number is being entered by the user and not a string, etc.

  5. document.getElementById(‘t-n’).value

    You write the above line which is actually a DOM manipulation method to get the value of the entered number. The Document method getElementById() returns an Element object representing the element whose id property matches the specified string i.e. in this case ‘t-n’ where n=1,2,3.

The formula for mortgage calculation:-

 var Interest = (LoanAmount * (InterestRate * 0.01)) / Tenor;
 var MonthlyPaid = ((LoanAmount / Tenor) + Interest);

Now create a variable Interest that will store the interest. First, you need to multiply the given interest rate to 0.01 after that adding it to the LoanAmount and then subsequently dividing it with respect to the tenor.

Then create a variable that will store the result for monthly payment. First, divide the loan amount with respect to tenor and then subsequently adding interest to it.

For displaying the output on the screen

document.getElementById('result').value = MonthlyPaid;

In conclusion,

Now write the above line that will return the output result. Here, ‘result’ is the id in the HTML document for the result input box.

Also, read: Sketch Pad in HTML5 and JavaScript

Leave a Reply

Your email address will not be published. Required fields are marked *