How do I loop the calculation below to get 15 records and display it on the web page?

Viewed 54

How do I loop my calculation to get up to 15 records based on the result of first record and have them displayed on the web page in a table format?

Input Example:

Amount: 1500
Input One: 10

Desired Output Example:

Sr. No. Value
1 1650
2 1815
3 1997
4 2197

Script:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function calculate() {
    //Inputs
    var amount = document.getElementById('amount').value;
    var inputOne = document.getElementById('inputOne').value;
    
    //Calculations
    var calcOne = +amount + (+amount * +inputOne/100);
    
    //Print the output in a table format...
     console.log(calcOne);
  }
    </script>

Code:

    <body>
    <table width="350" border="0">
    
      <tr>
        <td>Amount:</td>
        <td><input class="form-control" name="amount" id="amount" value="" type="number"/></td>
      </tr>
      <tr>
        <td>Input One:</td>
        <td><input class="form-control" name="inputOne" id="inputOne" value="" type="number"/></td>
      </tr>
      <tr>
    <td><input type="button" name="calculate" id="calculate" value="calculate" onClick="calculate()"/></td>
    <td><input type="button" name="clear" id="clear" value="clear" onClick="clear()"/></td>
     </tr>
    </table>
    </body>  
1 Answers

Here is the script tag, which will create a new table and add columns (upto 15, as you mentioned in your question), with values adding up to your formula.

 // inside script
    const table = document.getElementById('valueTable');

    function calculate() {
        //Inputs
        var amount = document.getElementById('amount').value;
        var inputOne = document.getElementById('inputOne').value;
        
        //Calculations
        let count = 1;
        let times = 15;
        let valueArray =[];

        for(i=0; i<times; i++){
            var calcOne = Math.ceil(+amount + (+amount * +inputOne/100));
            valueArray.push(calcOne);
            createColumn(calcOne, count++);
            amount = calcOne;
        }
    }

    function createColumn(calcOne, count){
        const srNo = document.createElement('TD');
        const value = document.createElement('TD');
        const tr = document.createElement('TR');

        table.appendChild(tr);
        tr.appendChild(srNo);
        tr.appendChild(value);

        srNo.innerHTML = count;
        value.innerHTML = calcOne;
    }
<table width="350" border="0">

  <tr>
    <td>Amount:</td>
    <td><input class="form-control" name="amount" id="amount" value="1500" type="number"/></td>
  </tr>
  <tr>
    <td>Input One:</td>
    <td><input class="form-control" name="inputOne" id="inputOne" value="15" type="number"/></td>
  </tr>
  <tr>
    <td>Input Two:</td>
    <td><input class="form-control" name="inputTwo" id="inputTwo" value="8" type="number"/></td>
  </tr>
  <tr>
    <td>Starting Year:</td>
    <td><input class="form-control" name="years" id="years" value="5" type="number"/></td>
  </tr>
  <tr>
    <td>Percentage</td>
    <td><input class="form-control" name="percentage" id="percentage" value="5" type="number"/></td>
  </tr>
  
  <tr>
    <td><input type="button" name="calculate" id="calculate" value="calculate" onClick="calculate()"/></td>
    <td><input type="button" name="clear" id="clear" value="clear" onClick="clear()"/></td>
  </tr>
</table>
<table id="valueTable" border="1" cellspacing="10" cellpadding="10">
    <tr>
        <th>Sr. No</th>
        <th>Value</th>
    </tr>
    
</table>

Related