JSFiddle - React, Tailwind, and code Playground

by Amandeep Singh

HTML

<form id="loanddata"> 
<table>
    <tr><td><b>enter loan information</b></td></tr>
    <tr><td>1) Amount of loan</td> <td><input type="text" id="principal" onchange="calculate();"></td></tr>
    <tr><td>2) Annual Percent of increase</td> <td><input type="text" id="interest" onchange="calculate();"></td></tr>
    <tr><td>3) Repayment period in years</td><td><input type="text" id="years" onchange="calculate();"></td></tr>
    <tr><td></td>
        <td><button name="compute" type="button" onclick="calculate();" /></td>
    </tr>
    
    <tr><td><b>Payment Information</b></td></tr>
    
    <tr><td>4) Your Monthly Payment</td> <td>$<span class="result" id="payment"></span></td></tr>
    
    <tr><td>5)Your Total Payment</td> <td>$<span class="result" id="total"></span></td></tr>
    
    <tr><td>6) Your Total Interest Payment</td> <td><span class="result" id="totalinterest"></td></tr>
    
    </table>
        </form>

JavaScript

function calculate() { 
    //var loandata = document.getElementById("loanddata");
//var principal1 = loandata.getElementById("principal");
//alert(principal1);
    
var principal = parseInt(document.getElementById("principal").value);
var interest = parseInt(document.getElementById("interest").value);
var payments = parseInt(document.getElementById("years").value);

if(!isNaN(principal) && !isNaN(interest) && !isNaN(payments)){
   
    var x = Math.pow(1 + interest, payments);
    var monthly = (principal*x*interest)/(x-1);
    var payment = document.getElementById("payment");
    var total = document.getElementById("total");
    var totalinterest = document.getElementById("totalinterest");
    
    if (isFinite(monthly)){
    
        payment.innerHTML = monthly.toFixed(2);
        total.innerHTML = (monthly * payments).toFixed(2);
        totalinterest.innerHTML = ((monthly*payments)-principal).toFixed(2);
    
        } else {
            payment.innerHTML = "";
            total.innerHTML = "";
            totalinterest.innerHTML = "";
        }   
    }
}