Question

我有一些有效的JavaScript。我希望脚本能够预测12个月以上的时间，并将结果显示在表格中（月为月）。

12个月表中的-第1行将是以下代码。

第2行将是第1个月的期末余额（“金额”变量）。脚本将重复计算利息，费用，增值税，然后是期末余额等，因此第2个月的期末余额也将是第3个月。开始平衡...

如果有人能帮助我完成此工作，我们将不胜感激。 -我不太了解Javascript-到目前为止，我已经基于baisc知识和以往的答案帮助完成了这一工作。

https://codepen.io/george-richardson/pen/VRGPdV

当前计算和显示结果-JS

getToken()

当前HTML

function myfunction() {
  event.preventDefault();
  var startBalance = parseFloat(document.getElementById("startBalance").value);
  var interestRate = parseFloat(document.getElementById("interestRate").value);
  var fee = parseFloat(document.getElementById("fee").value);
  parseFloat(document.getElementById("interestRate").value);
  var vat = parseFloat(document.getElementById("vat").value);



  interestRate = interestRate / 100;
  fee = fee / 100;
  vat = vat / 100;

  var simpleInt = startBalance * interestRate;
  var profitfee = simpleInt * fee;
  var afterVAT = profitfee * vat;
  var amount = (startBalance + simpleInt - profitfee - afterVAT).toFixed(2);

  document.getElementById("siOutput-00").innerHTML = "Investment: £" + startBalance.toFixed(2);
  document.getElementById("siOutput-01").innerHTML = "Return: £" + simpleInt.toFixed(2);
  document.getElementById("siOutput-02").innerHTML = "Fee: £" + profitfee.toFixed(2);
  document.getElementById("siOutput-002").innerHTML = "VAT: £" + afterVAT.toFixed(2);
  document.getElementById("siOutput-03").innerHTML = "End Balance: £" + amount;
}

12个月JS输出表

<div class="container" id="test">
<form id="siForm onkeyup="myfunction()"">
      <div class="form-group">
        <label for="startBalance">Start Balance</label>
        <input type="text" onkeyup="myfunction()" class="form-control" id="startBalance" placeholder="Enter amount without dollar sign">
      </div>
      <div class="form-group">
        <label for="interestRate">Interest Rate</label>
        <input type="text" onkeyup="myfunction()" class="form-control" id="interestRate" placeholder="Example: 12%">
      </div>
  <div class="form-group">
        <label for="fee">Fee</label>
        <input type="text" onkeyup="myfunction()" class="form-control" id="fee" placeholder="Example: 12%">
      </div>
  <div class="form-group">
        <label for="vat">VAT</label>
        <input type="text" onkeyup="myfunction()" class="form-control" id="vat" placeholder="Example: 12%">
      </div>
    </form>
    </div>

    <div>
      <p class="lead mt-3" id="siOutput-00"></p>
      <p class="lead mt-3" id="siOutput-01"></p>
      <p class="lead mb-3" id="siOutput-02"></p>
      <p class="lead mb-3" id="siOutput-002"></p>
       <p class="lead mb-3" id="siOutput-03"></p>
    </div>

研究-12个月表输出的起点

<style>
                                                .forecast table,
                    .forecast tr,
                    .forecast td,
                    .forecast th {
                      border: 1px solid;
                      border-collapse: collapse;
                    }
                            </style>

<table class="forecast table table-striped" id="forecast">
<tr><th scope="col">Month</th><th scope="col">Start</th>
<th scope="col">Return</th><th scope="col">Fee</th><th scope="col">VAT</th><th scope="col">End</th></tr>
<tr><td>1</td><td class="test"></td><td class="test><td class="test></td><td class="test"></td><td class="test"></td></tr>
<tr><td>2</td><td class="test"></td><td class="test"><td class="test></td><td class="test"></td><td class="test"></td></tr>
<tr><td>3</td><td class="test"></td><td class="test"><td class="test></td><td class="test"></td><td class="test"></td></tr>
<tr><td>4</td><td class="test"></td><td class="test"><td class="test></td><td class="test"></td><td class="test"></td></tr>
<tr><td>5</td><td class="test"></td><td class="test"><td class="test></td><td class="test"></td><td class="test"></td></tr>
<tr><td>6</td><td class="test"></td><td class="test"><td class="test></td><td class="test"></td><td class="test"></td></tr>
<tr><td>7</td><td class="test"></td><td class="test"><td class="test></td><td class="test"></td><td class="test"></td></tr>
<tr><td>8</td><td class="test"></td><td class="test"><td class="test></td><td class="test"></td><td class="test"></td></tr>
<tr><td>9</td><td class="test"></td><td class="test"><td class="test></td><td class="test"></td><td class="test"></td></tr>
<tr><td>10</td><td class="test"></td><td class="test"><td class="test></td><td class="test"></td><td class="test"></td></tr>
<tr><td>11</td><td class="test"></td><td class="test"><td class="test></td><td class="test"></td><td class="test"></td></tr>
<tr><td>12</td><td class="test"></td><td class="test"><td class="test></td><td class="test"></td><td class="test"></td></tr>

Answer 1

我设法做到了：

function myfunction() {
  event.preventDefault();
  doForecast(0);
}

function doForecast(index){
  var nextIndex = index+1;
  var startBalance = null;
  if(index == 0){
    startBalance = parseFloat(document.getElementById("startBalance"+index).value);
  } else {
    startBalance = parseFloat(document.getElementById("amount"+index).innerHTML);
  }
  
  var interestRate = parseFloat(document.getElementById("interestRate").value);
  var fee = parseFloat(document.getElementById("fee").value);
  parseFloat(document.getElementById("interestRate").value);
  var vat = parseFloat(document.getElementById("vat").value);
  
  interestRate = interestRate / 100;
  fee = fee / 100;
  vat = vat / 100;
  
  var simpleInt = startBalance * interestRate;
  var profitfee = simpleInt * fee;
  var amendedBalance = simpleInt - profitfee;
  var afterVAT = amendedBalance * vat;
  var amount = (startBalance + simpleInt - profitfee - afterVAT).toFixed(2);
  
  var stringIndex = ""+(nextIndex);
  document.getElementById("startBalance"+stringIndex).innerHTML = startBalance.toFixed(2);
  document.getElementById("simpleInt"+stringIndex).innerHTML = simpleInt.toFixed(2);
  document.getElementById("profitfee"+stringIndex).innerHTML = profitfee.toFixed(2);
  document.getElementById("afterVAT"+stringIndex).innerHTML = afterVAT.toFixed(2);
  document.getElementById("amount"+stringIndex).innerHTML = amount;
  if( nextIndex < 12){
    doForecast(nextIndex);
  }
}

<div class="container" id="test">
  <form id="siForm" onkeyup="myfunction()">
    <div class="form-group">
      <label for="startBalance">Start Balance</label>
      <input type="text" onkeyup="myfunction()" class="form-control" id="startBalance0" placeholder="Enter amount without dollar sign">
    </div>
    <div class="form-group">
      <label for="interestRate">Interest Rate</label>
      <input type="text" onkeyup="myfunction()" class="form-control" id="interestRate" placeholder="Example: 12%">
    </div>
    <div class="form-group">
      <label for="fee">Fee</label>
      <input type="text" onkeyup="myfunction()" class="form-control" id="fee" placeholder="Example: 12%">
    </div>
    <div class="form-group">
      <label for="vat">VAT</label>
      <input type="text" onkeyup="myfunction()" class="form-control" id="vat" placeholder="Example: 12%">
    </div>
    <button type="submit" class="btn btn-primary" id="btnSimple">Submit</button>
  </form>
</div>

<style>
  .forecast table,
  .forecast tr,
  .forecast td,
  .forecast th {
    border: 1px solid;
    border-collapse: collapse;
  }
</style>

<table class="forecast table table-striped" id="forecast">
  <tr>
    <th scope="col">Month</th>
    <th scope="col">Start</th>
    <th scope="col">Return</th>
    <th scope="col">Fee</th>
    <th scope="col">VAT</th>
    <th scope="col">End</th>
  </tr>
  <tr>
    <td>1</td>
    <td >
      <span>£</span>
      <span id="startBalance1"></span>
    </td>
    <td>
      <span>£</span>
      <span id="simpleInt1"></span>
    </td>
    <td>
      <span>£</span>
      <span id="profitfee1"></span>
    </td>
    <td>
      <span>£</span>
      <span id="afterVAT1"></span>
    </td>
    <td>
      <span>£</span>
      <span id="amount1"></span>
    </td>
  </tr>
  <tr>
    <td>2</td>
    <td >
      <span>£</span>
      <span id="startBalance2"></span>
    </td>
    <td>
      <span>£</span>
      <span id="simpleInt2"></span>
    </td>
    <td>
      <span>£</span>
      <span id="profitfee2"></span>
    </td>
    <td>
      <span>£</span>
      <span id="afterVAT2"></span>
    </td>
    <td>
      <span>£</span>
      <span id="amount2"></span>
    </td>
  </tr>
  
  <tr>
    <td>3</td>
    <td >
      <span>£</span>
      <span id="startBalance3"></span>
    </td>
    <td>
      <span>£</span>
      <span id="simpleInt3"></span>
    </td>
    <td>
      <span>£</span>
      <span id="profitfee3"></span>
    </td>
    <td>
      <span>£</span>
      <span id="afterVAT3"></span>
    </td>
    <td>
      <span>£</span>
      <span id="amount3"></span>
    </td>
  </tr>
  <tr>
    <td>4</td>
    <td >
      <span>£</span>
      <span id="startBalance4"></span>
    </td>
    <td>
      <span>£</span>
      <span id="simpleInt4"></span>
    </td>
    <td>
      <span>£</span>
      <span id="profitfee4"></span>
    </td>
    <td>
      <span>£</span>
      <span id="afterVAT4"></span>
    </td>
    <td>
      <span>£</span>
      <span id="amount4"></span>
    </td>
  </tr>
  <tr>
    <td>5</td>
    <td >
      <span>£</span>
      <span id="startBalance5"></span>
    </td>
    <td>
      <span>£</span>
      <span id="simpleInt5"></span>
    </td>
    <td>
      <span>£</span>
      <span id="profitfee5"></span>
    </td>
    <td>
      <span>£</span>
      <span id="afterVAT5"></span>
    </td>
    <td>
      <span>£</span>
      <span id="amount5"></span>
    </td>
  </tr>
<tr>
    <td>6</td>
    <td >
      <span>£</span>
      <span id="startBalance6"></span>
    </td>
    <td>
      <span>£</span>
      <span id="simpleInt6"></span>
    </td>
    <td>
      <span>£</span>
      <span id="profitfee6"></span>
    </td>
    <td>
      <span>£</span>
      <span id="afterVAT6"></span>
    </td>
    <td>
      <span>£</span>
      <span id="amount6"></span>
    </td>
  </tr>
  <tr>
    <td>7</td>
    <td >
      <span>£</span>
      <span id="startBalance7"></span>
    </td>
    <td>
      <span>£</span>
      <span id="simpleInt7"></span>
    </td>
    <td>
      <span>£</span>
      <span id="profitfee7"></span>
    </td>
    <td>
      <span>£</span>
      <span id="afterVAT7"></span>
    </td>
    <td>
      <span>£</span>
      <span id="amount7"></span>
    </td>
  </tr>
  <tr>
    <td>8</td>
    <td >
      <span>£</span>
      <span id="startBalance8"></span>
    </td>
    <td>
      <span>£</span>
      <span id="simpleInt8"></span>
    </td>
    <td>
      <span>£</span>
      <span id="profitfee8"></span>
    </td>
    <td>
      <span>£</span>
      <span id="afterVAT8"></span>
    </td>
    <td>
      <span>£</span>
      <span id="amount8"></span>
    </td>
  </tr>
 <tr>
    <td>9</td>
    <td >
      <span>£</span>
      <span id="startBalance9"></span>
    </td>
    <td>
      <span>£</span>
      <span id="simpleInt9"></span>
    </td>
    <td>
      <span>£</span>
      <span id="profitfee9"></span>
    </td>
    <td>
      <span>£</span>
      <span id="afterVAT9"></span>
    </td>
    <td>
      <span>£</span>
      <span id="amount9"></span>
    </td>
  </tr>
 <tr>
    <td>10</td>
    <td >
      <span>£</span>
      <span id="startBalance10"></span>
    </td>
    <td>
      <span>£</span>
      <span id="simpleInt10"></span>
    </td>
    <td>
      <span>£</span>
      <span id="profitfee10"></span>
    </td>
    <td>
      <span>£</span>
      <span id="afterVAT10"></span>
    </td>
    <td>
      <span>£</span>
      <span id="amount10"></span>
    </td>
  </tr>
  <tr>
    <td>11</td>
    <td >
      <span>£</span>
      <span id="startBalance11"></span>
    </td>
    <td>
      <span>£</span>
      <span id="simpleInt11"></span>
    </td>
    <td>
      <span>£</span>
      <span id="profitfee11"></span>
    </td>
    <td>
      <span>£</span>
      <span id="afterVAT11"></span>
    </td>
    <td>
      <span>£</span>
      <span id="amount11"></span>
    </td>
  </tr>
  <tr>
    <td>12</td>
    <td >
      <span>£</span>
      <span id="startBalance12"></span>
    </td>
    <td>
      <span>£</span>
      <span id="simpleInt12"></span>
    </td>
    <td>
      <span>£</span>
      <span id="profitfee12"></span>
    </td>
    <td>
      <span>£</span>
      <span id="afterVAT12"></span>
    </td>
    <td>
      <span>£</span>
      <span id="amount12"></span>
    </td>
  </tr>
</table>

选择所有参数后，表格将完全填充。

代码也可以在这里找到：https://codepen.io/sebbousquet/pen/oVPwxE

编辑：在每个单元格中添加GBP符号（codepen也已更新）

重复javascript计算并显示到表格

1 个答案: