simple way to calculate average using javascript

Question

I have a table where some inputs have to be insert to calculate average of certain numbers and null values have to be excluded. I have almost done it but stuck in the middle. Here are the codes:

function calcAvg(input_id, output_id, co_id) {
  //Get all elements with 'class="select"'
  var selects = document.getElementsByClassName(input_id);
  //Initialize vars
  var avg = 0;
  var count = 0;
  //Calculate average
  for (var i = 0; i < selects.length; i++) {
    if (selects[i].value != "") {
      count++;
      avg += Number(selects[i].value);
      //Alert for debugging purposes
      //alert(selects[i].value+" "+avg);
    }
  }
  avg = avg / count;
  //Output average
  document.getElementById(output_id).value = avg;
}

<table>
  <tr>
    <td height="41" colspan="12" align="center">ATTAINMENT OF PO( PO-CO MAPPING)
    </td>
  </tr>
  <tr>
    <td width="17%" rowspan="2" align="center">NAME OF THE MODULES</td>
    <td height="34" colspan="11" align="center">PROGRAME OUTCOMES</td>
    <td height="34" colspan="11" align="center">MODULE CO</td>
  </tr>
  <tr>
    <td width="7%" align="center">PO1</td>
    <td width="7%" align="center">PO2</td>
    <td width="7%" align="center">CO AVERAGES</td>
  </tr>
  <tr>
    <td height="71" align="center">MATHEMATICS</td>
    <td align="center"><input type="number" class="select1" name="value[]" onKeyPress="if(this.value.length==2) return false;" onChange="calcAvg('select1','calculation1','calc_co1');" style="width:60px">&nbsp;
    </td>
    <td align="center"><input type="number" class="select2" name="value[]" onKeyPress="if(this.value.length==2) return false;" onChange="calcAvg('select2','calculation2','calc_co1');" style="width:60px">&nbsp;
    </td>
    <td align="center"><input type="text" name="Module_co1" id="calc_co1" readonly style="width:60px">&nbsp;</td>
  </tr>
  <tr>
    <td height="71" align="center">SCIENCE</td>
    <td align="center"><input type="number" class="select1" name="value[]" onKeyPress="if(this.value.length==2) return false;" onChange="calcAvg('select1','calculation1','calc_co2');" style="width:60px">&nbsp;
    </td>
    <td align="center"><input type="number" class="select2" name="value[]" onKeyPress="if(this.value.length==2) return false;" onChange="calcAvg('select2','calculation2','calc_co2');" style="width:60px">&nbsp;
    </td>
    <td align="center"><input type="text" name="Module_co2" id="calc_co2" readonly style="width:60px">&nbsp;</td>
  </tr>
  <tr bgcolor="#9999CC">
    <td height="71" align="center">PO AVERAGES</td>
    <td align="center"><input type="text" name="Avg" id="calculation1" readonly style="width:60px">&nbsp;</td>
    <td align="center"><input type="text" name="Avg1" id="calculation2" readonly style="width:60px">&nbsp;</td>
  </tr>

</table>

I have to calculate the average both vertically and horizontally. I have calculated horizontally but stuck in the the vertically calculation. The logic is- the value which are inserted in the vertical position will be the same. I know that the average will be same as the input value but i have to show it in the text box. If there any way to calculate it vertically...here also null value should be excluded.

Your indentation is really messy and hard to follow. This would be a much nicer question just by improving your code format. Also, there is no type="text/jscript". I don't know any browser that would actually evaluate a <script> with that type. — Patrick Roberts
– Patrick Roberts, Commented Jun 2, 2017 at 19:54
edited....So i think i have missed document.getElementById(co_id).value=avg; — Debasish Choudhury
– Debasish Choudhury, Commented Jun 2, 2017 at 19:59
Note that right now, when I run your code, I get an error because calc_co1 is not defined. I believe that should be in quotes, like calcAvg('select1','calculation1',calc_co1);, but didn't know if you meant to do that or not. — Heretic Monkey
– Heretic Monkey, Commented Jun 2, 2017 at 20:05
It's a bit confusing what you mean by "horizontally" and "vertically". When I run your code, I get the average of the elements by column, which is what I would term "vertically". Basically, the logic for "horizontally" is the same; add up the values of each input in the row and divide by the number of elements. Where are you stuck? — Heretic Monkey
– Heretic Monkey, Commented Jun 2, 2017 at 20:13

sorayadragon · Accepted Answer · 2017-06-02 20:26:38Z

You need to average the vertical and horizontal directions separately. You can create classes to indicate which row and column the input is in and then use that to call calcAvg() when any of the selects are changed.

I changed the class names of the selects and the ids of the average boxes, so it's a little more clear. For each select, calcAvg() is called twice, once for the vertical direction and once for the horizontal direction.

function calcAvg(input_id, output_id) {
  //Get all elements with 'class="select"'
  var selects = document.getElementsByClassName(input_id);
  //Initialize vars
  var avg = 0;
  var count = 0;
  //Calculate average
  for (var i = 0; i < selects.length; i++) {
    if (selects[i].value != "") {
      count++;
      avg += Number(selects[i].value);
      //Alert for debugging purposes
      //alert(selects[i].value+" "+avg);
    }
  }
  avg = avg / count;
  //Output average
  document.getElementById(output_id).value = avg;
}

<table>
  <tr>
    <td height="41" colspan="12" align="center">ATTAINMENT OF PO( PO-CO MAPPING)
    </td>
  </tr>
  <tr>
    <td width="17%" rowspan="2" align="center">NAME OF THE MODULES</td>
    <td height="34" colspan="11" align="center">PROGRAME OUTCOMES</td>
    <td height="34" colspan="11" align="center">MODULE CO</td>
  </tr>
  <tr>
    <td width="7%" align="center">PO1</td>
    <td width="7%" align="center">PO2</td>
    <td width="7%" align="center">CO AVERAGES</td>
  </tr>
  <tr>
    <td height="71" align="center">MATHEMATICS</td>
    <td align="center"><input type="number" class="select1v select1h" name="value[]" onKeyPress="if(this.value.length==2) return false;" onChange="calcAvg('select1v','avg1v');calcAvg('select1h', 'avg1h');" style="width:60px">&nbsp;
    </td>
    <td align="center"><input type="number" class="select2v select1h" name="value[]" onKeyPress="if(this.value.length==2) return false;" onChange="calcAvg('select2v','avg2v');calcAvg('select1h','avg1h');" style="width:60px">&nbsp;
    </td>
    <td align="center"><input type="text" name="Module_co1" id="avg1h" readonly style="width:60px">&nbsp;</td>
  </tr>
  <tr>
    <td height="71" align="center">SCIENCE</td>
    <td align="center"><input type="number" class="select1v select2h" name="value[]" onKeyPress="if(this.value.length==2) return false;" onChange="calcAvg('select1v','avg1v');calcAvg('select2h','avg2h');" style="width:60px">&nbsp;
    </td>
    <td align="center"><input type="number" class="select2v select2h" name="value[]" onKeyPress="if(this.value.length==2) return false;" onChange="calcAvg('select2v','avg2v');calcAvg('select2h','avg2h');" style="width:60px">&nbsp;
    </td>
    <td align="center"><input type="text" name="Module_co2" id="avg2h" readonly style="width:60px">&nbsp;</td>
  </tr>
  <tr bgcolor="#9999CC">
    <td height="71" align="center">PO AVERAGES</td>
    <td align="center"><input type="text" name="Avg" id="avg1v" readonly style="width:60px">&nbsp;</td>
    <td align="center"><input type="text" name="Avg1" id="avg2v" readonly style="width:60px">&nbsp;</td>
  </tr>

</table>

Collectives™ on Stack Overflow

simple way to calculate average using javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related