function getValues(){
    //Pull values from page.
    let loan = parseInt(document.getElementById("loan").value);
    let term = parseInt(document.getElementById("term").value);
    let rate = parseFloat(document.getElementById("rate").value);
    //Calc and display main information.
    let totalMonthlyPayment = ((loan) * (rate/1200)) / (1-(Math.pow((1 + rate/1200), -term)))
    let totalLoan = totalMonthlyPayment * term;
    let totalInterest = totalLoan - loan;
    document.getElementById("displayMonthlyPayment").innerHTML = `$${(totalMonthlyPayment).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;
    document.getElementById("displayPrincipal").innerHTML = `$${(loan).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;
    document.getElementById("displayInterest").innerHTML = `$${(totalInterest).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;
    document.getElementById("displayCost").innerHTML = `$${(totalLoan).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;
    //Calculate monthly payments - insert objects into an array.
    array = calculate(loan, term, rate);
    //Display the array.
    displayPayments(array);
}
function calculate(loan, term, rate){
    let totalMonthlyPayment = ((loan) * (rate/1200)) / (1-(Math.pow((1 + rate/1200), -term)))
    //Create an array with a starting empty object.
    let array = [{
        month: 0,
        payment: totalMonthlyPayment,
        principal: 0,
        interest: 0,
        totalInterest: 0,
        balance: loan
    }]
    //For loop to calculate all values of new object, push object into array.
    for (let i = 1; i <= term; i++){
        let prevBalance = array[i-1].balance;
        let prevTInterest = array[i-1].totalInterest;
        let interest = prevBalance * (rate / 1200);
        let principal = totalMonthlyPayment - interest;
        let totalInterest = prevTInterest + interest;
        let balance = prevBalance - principal;
        array.push({
            month: i,
            payment: totalMonthlyPayment,
            principal: principal,
            interest: interest,
            totalInterest: totalInterest,
            balance: balance
        })
    }
    //Return array so we can display it.
    return array;
}
function displayPayments(array){
    //Grab template from HTML ...
    let template = document.getElementById("template");
    //Grab tbody from HTML
    let body = document.getElementById("eventBody");
    //Clear tbody
    body.innerHTML = "";
    //Array shift so first index of array is deleted.
    array.shift();
    //For each element, display in table.
    array.forEach(element => {
        let node = document.importNode(template.content, true)
        let item = node.querySelectorAll("td");
        item[0].textContent = element.month;
        item[1].textContent = `$${(element.payment).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;
        item[2].textContent = `$${(element.principal).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;
        item[3].textContent = `$${(element.interest).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;
        item[4].textContent = `$${(element.totalInterest).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;
        item[5].textContent = `$${(element.balance).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;
        body.appendChild(node);
    });
}