nnsusa nnsusa - 1 month ago 12
HTML Question

How to create a javascript table and get a calculations from input as table data

I'm creating a table using Javascript. I have 2 input; a principle amount and an annual interest rate. How can I create a loop with an output into a table of 10 years with principle+compounded interest rate. I'm not allowed to use jquery.

**I'm trying to display results as a table of the increased amount based on the principle and interest (compound interest); Year 1 Year 2 Year 3 Year 4 Year 5 1100 1210 1331 1464 1610 (10 years in a table, first row are years 1 to 10, second row are the amounts, sorry I don't know how to add a picture here)

Here is what I have started so far for the form input;

<!DOCTYPE html>
<html>

<head>
<title>Savings Account Calculator</title>

</head>

<body>
<h1>Savings Account Calculator</h1>

<p>

<form name="savingdata">
<table>

<tr>
<td>Principle Amount:</td>
<td><input type="text" id="principle" value="1000" /></td>
</tr>

<tr>
<td>Annual Interest (%):</td>
<td><input type="text" id="interest" value="10" /></td>
</tr>

</table>
<br>
<input type="button" onClick="calculateBy()" Value="Calculate" />
</form>
<br>
</p>
</body>
</html>

Answer

You can setup an empty div and use a table or other HTML element and populate the results with that.

JSFiddle - https://jsfiddle.net/xjj7vook/

function calculateBy() {

  var principle = document.getElementById('principle').value;
  var interest = document.getElementById('interest').value;
  interest = 1 + (interest / 100); //convert to dec
  var tableHTML = "<table>";
  alert(interest);
  var total = principle;
  for (i = 1; i < 10; i++) {
    var res = principle * (Math.pow(interest, i));
    res = res.toFixed(2);
    interestgained = +res - +principle;
    interestgained = interestgained.toFixed(2);
    tableHTML = tableHTML + "<tr>Year " + i + " | Principle: " + principle + " USD | Total: " + res + " USD | Interest: " + interestgained + " USD</tr><br>";
  }

  tableHTML = tableHTML + "</table>";
  alert(tableHTML);
  document.getElementById("someDIV").innerHTML = tableHTML;
}

Formula is not correct, I don't know what you are trying to calculate. This one just shows you how much interest you would gain per years.

Comments