JavaScript Математический расчет - Различные результаты по сравнению с формулой Excel

Question

Когда я симулирую следующие вычисления в Excel, используя JavaScript в HTML форме, я получаю другое значение по сравнению с результатом Excel. Я приложил результаты листа Excel и HTML формы Результаты также. Благодарим вас за помощь.

Формула Excel

=IF(E13=0,0,((E9/E13)+(E9*E11/12)))

Результат Excel

HTML Результат формы

Метод I Испытания

function calculate() {

  var E9 = document.getElementById('E9').value;
  var E11 = document.getElementById('E11').value;
  var E13 = document.getElementById('E13').value;


  var E11Pecentage = E11 / 100;

  if (E9 !== "" && E11 !== "" && E13 !== "") {

    var cal = (E9 / E13) + (E9 * E11Pecentage / 12);

    //(E9/E13)+(E9*E11/12)
    console.log(cal);
    document.getElementById('E15').value = cal;

  } else {
    document.getElementById('E15').value = null;
  }



}

<form id="mainForm" type="POST" action="/">
  <div class="container body-content">
    <div class="container">
      <div class="row justify-content-start" style="padding-top:10px;">
        <h1>Term Loan Calculator</h1>
      </div>
      <div class="row justify-content-start" style="padding-top:10px;">
        <div class="col" style="padding-top:10px;">
          <label>Loan facility proposed</label>
        </div>
        <div class="col" style="padding-top:10px;">
          <input class="form-control" type="number" name="E9" id="E9" required onkeydown="calculate()" />
        </div>
      </div>
      <div class="row justify-content-start" style="padding-top:10px;">
        <div class="col" style="padding-top:10px;">
          <label>Annual Interest Rate</label>
        </div>
        <div class="col" style="padding-top:10px;">
          <input class="form-control" type="number" name="E11" id="E11" required onkeydown="calculate()" />
        </div>
      </div>
      <div class="row justify-content-start" style="padding-top:10px;">
        <div class="col" style="padding-top:10px;">
          <label>Loan Term</label>
        </div>
        <div class="col" style="padding-top:10px;">
          <input class="form-control" type="number" name="E13" id="E13" required onkeydown="calculate()" />
        </div>
      </div>

      <div class="row justify-content-start" style="padding-top:10px;">
        <div class="col" style="padding-top:10px;">
          <label>Installment amount</label>
        </div>
        <div class="col" style="padding-top:10px;">
          <input class="form-control" type="number" name="E15" id="E15" disabled/>
        </div>
      </div>



      <div class="row justify-content-start" style="padding-top:10px;">
        <div class="col" style="padding-top:10px;">

        </div>
        <div class="col" style="padding-top:10px;">

        </div>
      </div>

    </div>
  </div>
</form>

Answer 1

Событие keydown запускает до , значение ваших входных данных фактически изменяется. Вместо этого используйте событие input:

function calculate() {

    var E9 = document.getElementById('E9').value;
    var E11 = document.getElementById('E11').value;
    var E13 = document.getElementById('E13').value;


    var E11Pecentage = E11/100;

    if(E9 !==""  && E11 !==""   && E13 !=="" ) {

        var cal = (E9/E13) + (E9 * E11Pecentage/12);

        //(E9/E13)+(E9*E11/12)
        console.log(cal);
        document.getElementById('E15').value = cal;

    }


    else {
        document.getElementById('E15').value = null;
    }
}

<form id="mainForm" type="POST"  action="/">
    <div class="container body-content">
      <div class="container">
        <div class="row justify-content-start" style="padding-top:10px;">
          <h1>Term Loan Calculator</h1>
        </div>
        <div class="row justify-content-start" style="padding-top:10px;">
          <div class="col" style="padding-top:10px;">
            <label>Loan facility proposed</label>
          </div>
          <div class="col" style="padding-top:10px;">
            <input class="form-control" type="number" name="E9" id="E9" required oninput="calculate()"/>
          </div>
        </div>
        <div class="row justify-content-start" style="padding-top:10px;">
          <div class="col" style="padding-top:10px;">
            <label>Annual Interest Rate</label>
          </div>
          <div class="col" style="padding-top:10px;">
          <input class="form-control" type="number" name="E11" id="E11" required oninput="calculate()"/>
          </div>
        </div>
        <div class="row justify-content-start" style="padding-top:10px;">
          <div class="col" style="padding-top:10px;">
            <label>Loan Term</label>
          </div>
          <div class="col" style="padding-top:10px;">
          <input class="form-control" type="number" name="E13" id="E13"  required oninput="calculate()"/>
          </div>
        </div>

        <div class="row justify-content-start" style="padding-top:10px;">
          <div class="col" style="padding-top:10px;">
            <label>Installment amount</label>
          </div>
          <div class="col" style="padding-top:10px;">
          <input class="form-control" type="number" name="E15" id="E15" disabled/>
          </div>
        </div>



        <div class="row justify-content-start" style="padding-top:10px;">
          <div class="col" style="padding-top:10px;">

          </div>
          <div class="col" style="padding-top:10px;">

          </div>
        </div>

      </div>
    </div>
</form>