A file named loan. html, write an HTML document that looks similar to figure 9-7 in the textbook. Write four functions with these headers: function doPayment ( )
function doBalance ( )
function computePayment (principal, annualRate, years, periodsPerYear)
function computeBalance (principal, annualRate, years, periodsPerYear, )
The first two functions (doPayment and doBalance) do the following:

Take no parameters.
Are called from an onclick attribute.
Get input from the user.
Call the computePayment or the computeBalance function.
Display a result to the user.
The computePayment function computes and returns the monthly payment for a loan with a fixed annual interest rate. The formula for computing a loan payment is

p = ar
1 − (1 + r)−n
Where p is the payment per period, a is the loan amount, r is the interest rate per period, and n is the total number of periods throughout the life of the loan.

The computeBalance function computes and returns the balance for a loan with a fixed annual interest rate. The formula for computing the balance of a loan after d payments have been made is

b = a (1 + r)d − p ( (1 + r)d − 1 )
r
Where b is the balance or payoff amount, a is the loan amount, r is the interest rate per period, p is the payment per period, and d is the number of payments paid to date.

function computePayment(principal, annualRate, periodsPerYear){

   var pay;

   pay = (principal * annualRate)/(1-(1+annualRate)-periodsPerYear);

   return pay;

}

function computeBalance(principal, annualRate, periodsPerYear, ){

   var balance ;

   let num = (principal*(1+annualRate)*periodsPerYear);

   let denum = *((1+annualRate) * periodsPerYear-1)*annualRate;

   balance = num-denum;

   return balance;

}

function doPayment(){

   let loanAmount = document.getElementById("principal").value;

   let rate = document.getElementById("rate").value;

   let duration = document.getElementsById("time").value;

   let result = computePayment(loanAmount, rate, duration);

   document.getElementsById("periodPay").value = result;

}

function doBalance(){

   let loanAmount = document.getElementById("principal").value;

   let rate = document.getElementById("rate").value;

   let duration = document.getElementById("time").value;

   let currentPaid = document.getElementById("paidMonths").value;

   let result = computeBalance(loanAmount, rate, duration, currentPaid);

   document.getElementById("displayBalance").value = result;

}

Explanation:

The javascript source code defines four functions. The 'doPayment' and 'doBalance' functions are initiated with the onclick properties of the HTML file buttons of the loan calculator. The doPayment function gets the user input from the HTML file and assigns them to variable which are used as the parameters of the computePayment function called.

The doBalance function also retrieve user input from the HTML file and calls the computeBalance function to calculate and return the balance of the loan to be paid.