如何在特定索引处添加JavaScript计算

问题描述 投票：0回答：1

我有一些完全正常工作的Javascript正在做一些计算并将它们显示在一个表中 - 它是一个12行表，代表一个12个月的预测

我添加了字段 - （additionalInvestment）和（月） - 我希望它可以在我输入的任何输入字段中说明，例如：

1000（additionalAmount）2（月） - javascript会将值1000添加到脚本中的月份2 ....（相当于Index2）的开始余额...所以说月份1结束余额为1000 - 脚本使月份2开始平衡当月1结束余额等等 - 但如果一组输入字段是1000（additionalAmount）和（月）2，它将在第2个月的开始余额中加1000.如果我放在第二组输入字段中的第3个月，它会将X值添加到第3个月的起始余额...

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

忽略forecastClient的脚本（日期）

function forecastClient() {

    const bankHolidays = new Set([
        Date.parse("April, 19 2019"),
        Date.parse("April, 22 2019"),
        Date.parse("May, 6 2019"),
        Date.parse("May, 27 2019"),
        Date.parse("August, 26 2019"),
        Date.parse("December, 25 2019"),
        Date.parse("December, 26 2019"),
        Date.parse("January, 1 2020"),
    ]);

    function addWorkingDays(date, days) {
        function workingDay(date) {
            while (true) {
                let day = (date.getDay() + 1) % 7;
                if (day < 2)
                    date.setDate(date.getDate() + 2 - day);
                if (!bankHolidays.has(date.getTime())) break;
                date.setDate(date.getDate() + 1);
            }
        }
        workingDay(date);
        while (days--) {
            date.setDate(date.getDate() + 1);
            workingDay(date);
        }
        return date;
    }

    const dateStr = document.querySelector("#startdate").value.replace(/-/g, "/");
    const date = new Date(dateStr);
    addWorkingDays(date, 0); // Make sure it is a working day
    const td = document.querySelectorAll("#forecast td.date-forecast");
    for (let i = 0; i < 12; i++) {
        td[i * 2].textContent = date.toDateString();
        td[i * 2 + 1].textContent = addWorkingDays(date, 27).toDateString();
        addWorkingDays(date, 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 afterVAT = profitfee * 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);
    }
}

function start() {
    forecastClient();
    myfunction();
}
<body onload="start();">

    <div class="form-group col-mb-3">
        <label onkeyup="" for="forecastLive">Live Date: <input value="03/27/2019" id="startdate"></label>

        <label for="startBalance">Start Balance
            <input onkeyup="myfunction()" id="startBalance0" value="1000">
        </label>
        <input type="hidden" onkeyup="myfunction()" id="interestRate" value="20">

        <input type="hidden" onkeyup="myfunction()" id="fee" value="30">

        <input type="hidden" onkeyup="myfunction()" id="vat" value="20">
    </div>

    <br>

    <div class="form-group col-mb-3">
        <label for="additionalAmount">Aditional Amount
            <input onkeyup="myfunction()" id="additionalAmount1" value=""></label>
        <label for="Month">Month
            <input onkeyup="myfunction()" id="additionalMonth" value="">
        </label>
        <label for="additionalAmount">Aditional Amount
            <input onkeyup="myfunction()" id="additionalAmount2" value=""></label>
        <label for="Month">Month
            <input onkeyup="myfunction()" id="additionalMonth" value="">
        </label>

        <br>
        <br>

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

        <table class="forecast table table-striped" id="forecast" onload="myfunction()">
            <tr>
                <th scope="col">Month</th>
                <th scope="col">Month Start</th>
                <th scope="col">Investment</th>
                <th scope="col">Return</th>
                <th scope="col">Fee</th>
                <th scope="col">Vat</th>
                <th scope="col">Closing Balance</th>
                <th scope="col">Month End</th>
            </tr>


            <tr>
                <td>1</td>
                <td class="date-forecast"></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>
                <td class="date-forecast"></td>
            </tr>

            <tr>
                <td>2</td>
                <td class="date-forecast"></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>
                <td class="date-forecast"></td>
            </tr>


            <tr>
                <td>3</td>
                <td class="date-forecast"></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>
                <td class="date-forecast"></td>
            </tr>


            <tr>
                <td>4</td>
                <td class="date-forecast"></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>
                <td class="date-forecast"></td>
            </tr>


            <tr>
                <td>5</td>
                <td class="date-forecast"></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>
                <td class="date-forecast"></td>
            </tr>


            <tr>
                <td>6</td>
                <td class="date-forecast"></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>
                <td class="date-forecast"></td>
            </tr>


            <tr>
                <td>7</td>
                <td class="date-forecast"></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>
                <td class="date-forecast"></td>
            </tr>


            <tr>
                <td>8</td>
                <td class="date-forecast"></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>
                <td class="date-forecast"></td>
            </tr>


            <tr>
                <td>9</td>
                <td class="date-forecast"></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>
                <td class="date-forecast"></td>
            </tr>


            <tr>
                <td>10</td>
                <td class="date-forecast"></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>
                <td class="date-forecast"></td>
            </tr>


            <tr>
                <td>11</td>
                <td class="date-forecast"></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>
                <td class="date-forecast"></td>
            </tr>


            <tr>
                <td>12</td>
                <td class="date-forecast"></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>
                <td class="date-forecast"></td>
            </tr>
        </table>
javascript
1个回答
1
投票

我设法这样做：

function forecastClient() {

    const bankHolidays = new Set([
        Date.parse("April, 19 2019"),
        Date.parse("April, 22 2019"),
        Date.parse("May, 6 2019"),
        Date.parse("May, 27 2019"),
        Date.parse("August, 26 2019"),
        Date.parse("December, 25 2019"),
        Date.parse("December, 26 2019"),
        Date.parse("January, 1 2020"),
    ]);

    function addWorkingDays(date, days) {
        function workingDay(date) {
            while (true) {
                let day = (date.getDay() + 1) % 7;
                if (day < 2) date.setDate(date.getDate() + 2 - day);
                if (!bankHolidays.has(date.getTime())) break;
                date.setDate(date.getDate() + 1);
            }
        }
        workingDay(date);
        while (days--) {
            date.setDate(date.getDate() + 1);
            workingDay(date);
        }
        return date;
    }

    const dateStr = document.querySelector("#startdate").value.replace(/-/g, "/");
    const date = new Date(dateStr);
    addWorkingDays(date, 0); // Make sure it is a working day
    const td = document.querySelectorAll("#forecast td.date-forecast");
    for (let i = 0; i < 12; i++) {
        td[i * 2].textContent = date.toDateString();
        td[i * 2 + 1].textContent = addWorkingDays(date, 27).toDateString();
        addWorkingDays(date, 1);
    }
};

function myfunction() {
    event.preventDefault();
    doForecast(0);
}

function doForecast(index) {
    var nextIndex = index + 1;
    var startBalance = null;
    var additionalAmount = (document.getElementById("additionalAmount").value != '') ? parseFloat(document.getElementById("additionalAmount").value) : null;
    var additionalMonth = parseFloat(document.getElementById("additionalMonth").value);
  
    var additionalAmount2 = (document.getElementById("additionalAmount2").value != '') ? parseFloat(document.getElementById("additionalAmount2").value) : null;
    var additionalMonth2 = parseFloat(document.getElementById("additionalMonth2").value);
  
    var additionalAmount3 = (document.getElementById("additionalAmount3").value != '') ? parseFloat(document.getElementById("additionalAmount3").value) : null;
    var additionalMonth3 = parseFloat(document.getElementById("additionalMonth3").value);
  
    if (index == 0) {
        startBalance = parseFloat(document.getElementById("startBalance" + index).value);
        if( additionalMonth == 1 && additionalAmount != undefined){
          startBalance += additionalAmount;
        }
        if( additionalMonth2 == 1 && additionalAmount2 != undefined){
          startBalance += additionalAmount2;
        }
        if( additionalMonth3 == 1 && additionalAmount3 != undefined){
          startBalance += additionalAmount3;
        }
    } else {
        startBalance = parseFloat(document.getElementById("amount" + index).innerHTML);
        if( additionalMonth > 1 && additionalMonth == (index + 1) && additionalAmount != undefined){
          startBalance += additionalAmount;
        }
        if( additionalMonth2 > 1 && additionalMonth2 == (index + 1) && additionalAmount2 != undefined){
          startBalance += additionalAmount2;
        }
        if( additionalMonth3 > 1 && additionalMonth3 == (index + 1) && additionalAmount3 != undefined){
          startBalance += additionalAmount3;
        }
    }

    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)

    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);
    }
}

function start() {
    forecastClient();
    myfunction();
}
<body onload="start();">

  <div class="form-group col-mb-3">
    <label onkeyup="" for="forecastLive">Live Date: <input value="03/27/2019" id="startdate"></label>

    <label for="startBalance">Start Balance
     <input id="startBalance0" value="1000">  
  </label>
    <input type="hidden" onkeyup="myfunction()" id="interestRate" value="20" />

    <input type="hidden" onkeyup="myfunction()" id="fee" value="30" />

    <input type="hidden" onkeyup="myfunction()" id="vat" value="20" />
  </div>

  <br>

  <div class="form-group col-mb-3">
    <label for="additionalAmount">Aditional Amount
<input onkeyup="myfunction()"  id="additionalAmount" value=""></label>
    <label for="Month">Month
<input onkeyup="myfunction()"  id="additionalMonth" value="">
</label>
<br />
    <label for="additionalAmount2">Aditional Amount
<input onkeyup="myfunction()"  id="additionalAmount2" value=""></label>
    <label for="Month">Month
<input onkeyup="myfunction()"  id="additionalMonth2" value="">
</label>
<br />
    <label for="additionalAmount3">Aditional Amount
<input onkeyup="myfunction()"  id="additionalAmount3" value=""></label>
    <label for="Month">Month
<input onkeyup="myfunction()"  id="additionalMonth3" value="">
</label>

    <br>
    <br>

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

    <table class="forecast table table-striped" id="forecast" onload="myfunction()">
      <tr>
        <th scope="col">Month</th>
        <th scope="col">Month Start</th>
        <th scope="col">Investment</th>
        <th scope="col">Return</th>
        <th scope="col">Fee</th>
        <th scope="col">Vat</th>
        <th scope="col">Closing Balance</th>
        <th scope="col">Month End</th>
      </tr>

      <tr>
        <td>1</td>
        <td class="date-forecast"></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>
        <td class="date-forecast"></td>
      </tr>

      <tr>
        <td>2</td>
        <td class="date-forecast"></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>
        <td class="date-forecast"></td>
      </tr>

      <tr>
        <td>3</td>
        <td class="date-forecast"></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>
        <td class="date-forecast"></td>
      </tr>

      <tr>
        <td>4</td>
        <td class="date-forecast"></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>
        <td class="date-forecast"></td>
      </tr>

      <tr>
        <td>5</td>
        <td class="date-forecast"></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>
        <td class="date-forecast"></td>
      </tr>

      <tr>
        <td>6</td>
        <td class="date-forecast"></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>
        <td class="date-forecast"></td>
      </tr>

      <tr>
        <td>7</td>
        <td class="date-forecast"></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>
        <td class="date-forecast"></td>
      </tr>

      <tr>
        <td>8</td>
        <td class="date-forecast"></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>
        <td class="date-forecast"></td>
      </tr>

      <tr>
        <td>9</td>
        <td class="date-forecast"></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>
        <td class="date-forecast"></td>
      </tr>

      <tr>
        <td>10</td>
        <td class="date-forecast"></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>
        <td class="date-forecast"></td>
      </tr>

      <tr>
        <td>11</td>
        <td class="date-forecast"></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>
        <td class="date-forecast"></td>
      </tr>

      <tr>
        <td>12</td>
        <td class="date-forecast"></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>
        <td class="date-forecast"></td>
      </tr>
    </table>

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

编辑：更新代码以允许3种可能性

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.