method to achieve this action. The document.querySelector
returns a floating point number to the number of decimal places of the argument passed. Next, we need to calculate the monthly payment of the loan using the formula whose link is provided in the comments.
Now, we want to create a place to house our table headers, which will be at the top of each column. I am housing these items in an array for two reasons. One, arrays are iterable, which will allow me to loop over each element and append it to our table. Second, it allows for an easy way to add columns later which is something I will have you do later. Next, notice that we create another variable that looks that references the table with the id of output in our HTML document. In case our user wants to check multiple loan combinations, it is important to clear out the table each time the user clicks the button. Otherwise, the user will end up with multiple tables stacked on one another. On lines 22-26, we use the createElement method
to dynamically create HTML elements for our table.
Now, let’s create those table headers. On line 29, we use the array forEach method
to loop over the elements of our array. With each pass, we are creating a table header element, using the createTextNode method
and the appendChild method
to add the column name to the table header, and then add the header to the table row. After the forEach loop has executed on all items in our array, we then append the the row to the table’s head element and the head element to the table itself.
Now that we’ve created the column headers, we now have to add all the following rows that will show the entire amortization schedule. Here, we are using nested for loops. The first for loop will created the rows, and the next creates the cells. Now, we want each cell to show different information to the user. Some fields will be calculated each pass through the for loop (principal), while others will remain the same (monthlyPayment). To accomplish this task, I used a select case statement that will look at which cell we are on, conduct the necessary calculation, and append it to the row. Line 74 will execute for every cell and append that cell to the current row. Line 78 will execute for every row and append the current row to the table body. After all of the loops have executed, line 82 will append the body (which now contains all the cells and the rows) to the table. And viola, you now have an amortization table generator. Run the HTML document in Chrome, input some values and watch the table be dynamically created. Next week, I will show how to use the Chrome dev tools to debug our code.
For now, I have a little homework assignment for you. Remember, that I said I created my columns in an array so that I could more easily add more if needed. Well, we need to add a column. It appears that our users want to see the dates that each payment will be due. Add a column that will show the first payment due today and subsequent payments due every month on the same day. To accomplish this task you will find the Date method
and the setMonth method
of importance. You will also need to add another case statement to account for the additional column.