Math operations from form values do not work when inputs are put in a table

March 4, 2022

This is a fairly simple code to just take in user inputs and perform math operation on. I put the inputs into a table to make it look slightly better. Now there are no outputs. The code previously worked before being put in a table format and now the functions don’t return any result. I am also aware there are better ways of coding this but I just need it to work, temporarily.

<!DOCTYPE html>
<html>
<style>
  table,
  th,
  td {
    border: 1px solid black;
  }
</style>

<body>
  <form name="formcalc">
    <h2>Tab 3</h2>

    <table style="width:100%">
      <tr>
        <th>Year</th>
        <th>Outflow</th>
        <th>Inflow</th>
      </tr>
      <tr>
        <td>Year 0</td>
        <td><input type="text" name="out0"></td>
        <td><input type="text" name="in0"></td>
      </tr>
      <tr>
        <td>Year 1</td>
        <td><input type="text" name="out1"></td>
        <td><input type="text" name="in1"></td>
      </tr>
      <tr>
        <td>Year 2</td>
        <td><input type="text" name="out2"></td>
        <td><input type="text" name="in2"></td>
      </tr>
      <tr>
        <td>Year 3</td>
        <td><input type="text" name="out3"></td>
        <td><input type="text" name="in3"></td>
      </tr>
      <tr>
        <td>Year 4</td>
        <td><input type="text" name="out4"></td>
        <td><input type="text" name="in4"></td>
      </tr>
      <tr>
        <td>Year 5</td>
        <td><input type="text" name="out5"></td>
        <td><input type="text" name="in5"></td>
      </tr>
    </table>

    <br> Discount rate: <input type="text" name="dr">
    <br> Result: <input type="text" name="result">
    <br>
    <input type="button" value="NPV" onClick="npv()">
    <input type="button" value="IRR" onClick="irr()">
    <input type="button" value="PP" onClick="pp()">

  </form>
  <script type="text/javascript">
    function npv() {
      var in0, in1, in2, in3, in4, in5, out0, out1, out2, out3, out4, out5, dr, res;
      
      dr = Number(document.formcalc.dr.value);
      in0 = Number(document.formcalc.in0.value);
      in1 = Number(document.formcalc.in1.value);
      in2 = Number(document.formcalc.in2.value);
      in3 = Number(document.formcalc.in3.value);
      in4 = Number(document.formcalc.in4.value);
      in5 = Number(document.formcalc.in5.value);
      out0 = Number(document.formcalc.out0.value);
      out1 = Number(document.formcalc.out1.value);
      out2 = Number(document.formcalc.out2.value);
      out3 = Number(document.formcalc.out3.value);
      out4 = Number(document.formcalc.out4.value);
      out5 = Number(document.formcalc.out5.value);
      res = (((in0 - out0) / ((1 + (dr / 100)) ** 0)) + ((in1 - out2) / ((1 + (dr / 100)) ** 1)) + ((in2 - out2) / ((1 + (dr / 100)) ** 2)) + ((in3 - out3) / ((1 + (dr / 100)) ** 3)) + ((in4 - out4) / ((1 + (dr / 100)) ** 4)) + ((in5 - out5) / ((1 + (dr / 100)) ** 5)));
      document.formcalc.result.value = res;
    }
  </script>
</body>

</html>

>Solution :

I made a little correction to your javascript code.
U are not using the form submit method (so your data can not be reach by name), you created your own, but this way can not reach the value of elements.

So i changed to getElementById and i changed every name property to id property:

<!DOCTYPE html>
<html>
<style>
table, th, td {
  border:1px solid black;
}
</style>
<body>

<h2>Tab 3</h2>

<table style="width:100%">
  <tr>
    <th>Year</th>
    <th>Outflow</th>
    <th>Inflow</th>
  </tr>
  <tr>
    <td>Year 0</td>
    <td><input type="text" id="out0"></td>
    <td><input type="text" id="in0"></td>
  </tr>
  <tr>
    <td>Year 1</td>
    <td><input type="text" id="out1"></td>
    <td><input type="text" id="in1"></td>
  </tr>
  <tr>
    <td>Year 2</td>
    <td><input type="text" id="out2"></td>
    <td><input type="text" id="in2"></td>
  </tr>
  <tr>
    <td>Year 3</td>
    <td><input type="text" id="out3"></td>
    <td><input type="text" id="in3"></td>
  </tr>
  <tr>
    <td>Year 4</td>
    <td><input type="text" id="out4"></td>
    <td><input type="text" id="in4"></td>
  </tr>
  <tr>
    <td>Year 5</td>
    <td><input type="text" id="out5"></td>
    <td><input type="text" id="in5"></td>
  </tr>
</table>

<br>
<form>
        Discount rate: <input type="text" id="dr">
        <br>
        Result: <input type="text" id="result">
        <br>
        <input type="button" value="NPV" onClick="npv()">
        <input type="button" value="IRR" onClick="irr()">
        <input type="button" value="PP" onClick="pp()">

</form>

</body>

Javascript

   function npv()
    {
        var in0, in1, in2, in3, in4, in5, out0, out1, out2, out3, out4, out5, dr, res;
        dr=parseFloat(document.getElementById('dr').value);
        in0=parseFloat(document.getElementById('in0').value);
        in1=parseFloat(document.getElementById('in1').value);
        in2=parseFloat(document.getElementById('in2').value);
        in3=parseFloat(document.getElementById('in3').value);
        in4=parseFloat(document.getElementById('in4').value);
        in5=parseFloat(document.getElementById('in5').value);
        out0=parseFloat(document.getElementById('out0').value);
        out1=parseFloat(document.getElementById('out1').value);
        out2=parseFloat(document.getElementById('out2').value);
        out3=parseFloat(document.getElementById('out3').value);
        out4=parseFloat(document.getElementById('out4').value);
        out5=parseFloat(document.getElementById('out5').value);
        res=(((in0-out0)/((1+(dr/100))**0))+((in1-out2)/((1+(dr/100))**1))+((in2-out2)/((1+(dr/100))**2))+((in3-out3)/((1+(dr/100))**3))+((in4-out4)/((1+(dr/100))**4))+((in5-out5)/((1+(dr/100))**5)));
        document.getElementById('result').value=res;
    }

https://jsfiddle.net/5aonj79b/3/

If you do not fill all the inputs, than your result will be NaN, (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN) so you will have to handle this.