title: js - how to output values from function into HTML table
body: <p>I've created a calculator to show repayments over the term of the loan.</p>
  
  <p>I've managed to calculate each months payment, interest, remaining loan but I'm trying to output this into a table. The columns will be a fixed number (5) but the rows should dynamically update based on the number of months.</p>
  
  <p>I've seen a few similar posts but can't get it to work for my code.</p>
  
  <p>Code below and in <a href="https://fiddle.jshell.net/a62a1ra0/7/" rel="nofollow noreferrer">jsfiddle</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="mortgageInput"&gt;
    &lt;form method="POST" name="calc" onclick="validateForm();repayment();return false;"&gt;
      &lt;label&gt;Amount &lt;/label&gt;
      &lt;input type="textbox" id="loan" value="100000"&gt;&lt;br&gt;
      &lt;label&gt;Years&lt;/label&gt;
      &lt;input type="textbox" id="years" value="15"&gt;&lt;br&gt;
      &lt;label&gt;Rate (%)&lt;/label&gt;
      &lt;input type="textbox" id="rate" value="6.00" onkeyup="calculate"&gt;&lt;br&gt;
      &lt;input type="button" value="Calculate" id="btn"&gt;&lt;br&gt;
      &lt;label&gt;Monthly Repayment&lt;/label&gt;
      &lt;input type="textbox" id="monthlyRepayment"&gt;&lt;br&gt;
      &lt;label&gt;Monthly Interest Only&lt;/label&gt;
      &lt;input type="textbox" id="interest"&gt;&lt;br&gt;
      &lt;label&gt;Monthly Capital Repayment&lt;/label&gt;
      &lt;input type="textbox" id="capitalRepayment"&gt;&lt;br&gt;
      &lt;label&gt;Total Interest&lt;/label&gt;
      &lt;input type="textbox" id="totalInterest"&gt;
    &lt;/form&gt;
  &lt;/div&gt;
   &lt;br&gt;
      Output into table...&lt;p id="demo"&gt;&lt;/p&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>(document).on("keyup", calculate());
  
  function validateForm(){
    var validation = true;
    validation &amp;= calculate();
    validation &amp;= pmt();
    return validation;
  }
  
  function calculate() {
    var p = document.querySelector("#loan").value;
    var y = document.querySelector("#years").value;
    var rate = document.querySelector("#rate").value;
    var r = rate / 100 / 12;
    var n = y * 12;
  
    var I = (p * r);
    var monthlyPayment = -pmt(r,n,p);
    var mr = (monthlyPayment - I);
    var ti = (monthlyPayment) * n - p;
    var list = JSON.stringify((computeSchedule(p, rate, 12, y, monthlyPayment)), 0, 4);
  
    document.querySelector("#interest").value = I.toFixed(2);
    document.querySelector("#totalInterest").value = ti.toFixed(2);
    document.querySelector("#capitalRepayment").value = mr.toFixed(2);
    document.querySelector("#monthlyRepayment").value = monthlyPayment.toFixed(2);
    document.getElementById("demo").innerHTML = list;
  }
  
  function pmt(rate,nper,pv) {
      var pvif, pmt;
  
      pvif = Math.pow( 1 + rate, nper);
      pmt = rate / (pvif - 1) * -(pv * pvif);   
  
      return pmt;
  }
  
  function computeSchedule(loan_amount, interest_rate, payments_per_year,     years, payment) {
      var schedule = [];
      var remaining = loan_amount;
      var number_of_payments = payments_per_year * years;
  
      for (var i=0; i&lt;=number_of_payments; i++) {
          var interest = remaining * (interest_rate/100/payments_per_year);
          var principle = (payment-interest);
          var row = [i, payment, interest&gt;0?interest:0, principle&gt;0?principle:0, remaining&gt;0?remaining:0];
          schedule.push(row);
          remaining -= principle
      }
  
      return schedule;
  }
  </code></pre>