# How to Create a Loan Amortization Calculator Using HTML and JavaScript

### Edited: 12 May 2015

So you have learned a little about HTML and JavaScript. Now you would like to accomplish something useful. If you make payments on any kind of loan or are thinking of taking one out then a javascript loan amortization calculator may fit your needs quite nicely.

This final JavaScript tutorial in the installment of tutorials puts together disciplines learned in many of Dumbledore's previous tutorials and leads an aspiring programmer on the quest to develop a functioning loan amortization calculator.

Unlike Dumbledore's other HTML and JavaScript tutorials that simply include snippets of the elements under study, this module will present the entire set of source code components, both HTML and JavaScript necessary to build the amortization calculator.

### HTML Input Table

The only component of the amortization calculator that users directly interact with is the HTML input table. This table provides a HTML form where the user may enter the data used to calculate the characteristics of the loan's terms and perform the amortization. The operations are then completed when the user clicks on the button labeled Commit.

The following code module presents the entire HTML file for the amortization program:

## Separate HTML and JavaScript

The HTML code presented above represents all the HTML coding necessary for the Amortization Program. Since HTML is only used by the program to generate the input for the program and display the results of the amortization, Dumbledore separated the HTML and JavaScript code.

The JavaScript component is contained in a separate file named amort.js and the following line of code included in the header portion of the HTML code above illustrates how to refer to the external JavaScript file from the HTML code:

## Amortization: JavaScript By The Numbers

As stated earlier, Dumbledore included the JavaScript code for the amortization program in a separate file. This serves a couple of purposes: first, separating the HTML and JavaScript isolates the presentation of data from the program logic; second, the JavaScript does not show up in the source-code for the HTML document.

The modules that follow present each of the JavaScript functions and explain what goes on within the function modules. The individual modules are presented as code snippets and the entire JavaScript file is included at the end of the tutorial. The first of these modules is the commitData() function:

## The commitData() Function

The commitData() function is the control or dispatch module for the program. This is the function that the user calls by pressing the button labeled Commit in the HTML form and specified in the <input> element of the HTML code. There are a number of housekeeping routines initiated by this function, the first of which is to create a table on a new page and echo the data that the user supplied. The module is displayed below:

The commitData() function is a dispatcher module, which simply means that this function calls other functions to perform the actions necessary for the program to generate the desired results, in this case the loan amortization.

This function begins by declaring and initializing the variables necessary to retrieve the user's data from the HTML form.

The function then calls the functions that echo the user's input back so the user may see what was entered, this is the renderEchoInput() function. Next, the function to render the amortization table is called, which is the renderAmortizationTable() function.

The displayData() function is called four times to echo back the data the user entered and finally the functions to calculate the terms of the loan and perform the amortization are called.

The functions called by the commitData() function comprise the meat of the program and the remainder of this hub explains each of those functions.

## Render the Table to Echo Input

The purpose of the renderEchoTable() function is to simply create the table that will display back the information entered by the user for verification. The commitData() function calls this function exactly one time.

You may notice that the function simply contains a number of document.write statements and that those statements seem to contain HTML code. If you noticed this, you are correct. JavaScript may contain HTML code. This is a useful characteristic when the programmer wishes to create HTML elements after the initial web page loads. This is exactly what the author wished to accomplish with this function. The function createss an empty table, which the program will later populate with data.

After creating the echo table, the amortization table is created as determined by the number of payments that the user entered:

Scroll to Continue

## Render the Amortization Table

Like the renderEchoTable() function above, the renderAmortizationTable() function displays an empty table that the program will later populate. The major difference in the functionality of the two modules is that this table varies in length according to a value entered by the user.

This variation is accomplished using a looping structure, which is dependent on the numPay parameter supplied by the calling routine.

One innovative method included in this function is using the tagNam variable to create dynamic id's for the <td> elements within the code. These id's are used by the getElementById() function later in the program so they must be unique. An alternative to the dynamic id's would have been to hard code an HTML table representing the maximum length of a loan, say 30 years or 360 payments but this would entail creating 360 static rows in the HTML table. This would have been a tedious exercise in codingcoding. However, in some cases the tedious method may someimes be easier than figuring out the alternative. Which method to apply isd up to the coder developing the program.

## Amortize Payments

The amortizePmts() function performs the steps to amortize the loan. These steps include calculating the current interest due on the loan, subtracting that interest from the amount of the monthly payment, then subtracting the resulting amount from the old balance. The result of this final subtraction then becomes the new balance for the loan. These operations repeat for as many payments are included in the terms of the loan and the final result is the loan amortization.

## Display a Table Field

The displayTableField() function is the shortest function in the program and was created as an early demonstration of the benefits of modularization. The two attributes included in the definition of the function are passed to the function when it is invoked and this short routine actually eliminates quite a bit of redundant coding by shortening the lengths of the lines used to display a table field if the function were not a separate module.

## Calculate the Monthly Payment

A standard accounting function forms the basis for the function used to calculate the monthly payment. This function uses the amount of the loan, the interest rate, and the number of payments to determine what the monthly payment would be for the given terms of the loan. The payment is calculated one time then echoed back to the user and finally used by the amortization routine to specify the state of the loan after each payment is made.

## Convert a Format to Two-Decimal

When interest rates are calculated they generally extend out to quite a few decimal places. This floating point number then influences monetary calculations so the number of decimal places may become quite large.

The twoDecimal() function converts a floating point number to one limited to two decimal places. This function is necessary to convert the output to a more readable form and ensure that the output in fact fits in the table fields..

## HTML Resources

eli on November 13, 2017:

if i want to open the table in another page ? in blank page..

and not like in here in the same page..

how can i do that ?

JustMike on April 30, 2016:

this is just what i was looking for. Thank you.

OllyDbg on December 17, 2015:

Thank you so much!

This Old Guy (author) from Somewhere in Ohio on February 09, 2012:

Boss,

You can use the isnumeric keyword to validate a required field that must be numeric. If the test passes, then data was entered into the field.

You can validate the value using the following:

if (number

Boss on February 08, 2012:

Can you help me out with validation as a required field, Must be a Number Field, Number must be greater than 0.

Thank You.

Patel on February 08, 2012:

Amazing

This Old Guy (author) from Somewhere in Ohio on November 01, 2011: