How to calculate average grade in javascript

Question

I'm trying to make a program that calculates the average grade based on user input. I've worked in codepen and i can't get it to work as i want the result of the sum is not matching with reality.

here's my html and javascript

<tr id="table-title">
  <td>Weging</td>
  <td>Cijfer</td>
</tr>

<tr>
  <td><input id="weight-1" type="text" size=2 maxlength="5" value=""></td>
  <td><input id="mark-1" type="text" size=2 maxlength="5" value=""></td>
</tr>

<tr>
  <td><input id="weight-2" type="text" size=2 maxlength="5" value=""></td>
  <td><input id="mark-2" type="text" size=2 maxlength="5" value=""></td>
</tr>

<tr>
  <td><input id="weight-3" type="text" size=2 maxlength="5" value=""></td>
  <td><input id="mark-3" type="text" size=2 maxlength="5" value=""></td>
</tr>

<tr>
  <td><input id="weight-4" type="text" size=2 maxlength="5" value=""></td>
  <td><input id="mark-4" type="text" size=2 maxlength="5" value=""></td>
</tr>

<tr>
  <td><input id="weight-5" type="text" size=2 maxlength="5" value=""></td>
  <td><input id="mark-5" type="text" size=2 maxlength="5" value=""></td>
</tr>

<tr>
  <td><input id="weight-6" type="text" size=2 maxlength="5" value=""></td>
  <td><input id="mark-6" type="text" size=2 maxlength="5" value=""></td>
</tr>

<tr>
  <td><input id="weight-7" type="text" size=2 maxlength="5" value=""></td>
  <td><input id="mark-7" type="text" size=2 maxlength="5" value=""></td>
</tr>

<tr>
  <td><input id="weight-8" type="text" size=2 maxlength="5" value=""></td>
  <td><input id="mark-8" type="text" size=2 maxlength="5" value=""></td>
</tr>

<tr>
  <td><input id="weight-9" type="text" size=2 maxlength="5" value=""></td>
  <td><input id="mark-9" type="text" size=2 maxlength="5" value=""></td>
</tr>

<tr>
  <td><input id="weight-10" type="text" size=2 maxlength="5" value=""></td>
  <td><input id="mark-10" type="text" size=2 maxlength="5" value=""></td>
</tr>

<tr>
  <td><input id="weight-11" type="text" size=2 maxlength="5" value=""></td>
  <td><input id="mark-11" type="text" size=2 maxlength="5" value=""></td>
</tr>

<tr>
  <td><input id="weight-12" type="text" size=2 maxlength="5" value=""></td>
  <td><input id="mark-12" type="text" size=2 maxlength="5" value=""></td>
</tr>

<tr>
  <td><input id="weight-13" type="text" size=2 maxlength="5" value=""></td>
  <td><input id="mark-13" type="text" size=2 maxlength="5" value=""></td>
</tr>

<tr>
  <td><input id="weight-14" type="text" size=2 maxlength="5" value=""></td>
  <td><input id="mark-14" type="text" size=2 maxlength="5" value=""></td>
</tr>

<tr>
  <td><input id="weight-15" type="text" size=2 maxlength="5" value=""></td>
  <td><input id="mark-15" type="text" size=2 maxlength="5" value=""></td>
</tr>

<tr>
  <td><input id="weight-16" type="text" size=2 maxlength="5" value=""></td>
  <td><input id="mark-16" type="text" size=2 maxlength="5" value=""></td>
</tr>

<tr>
  <td><input id="weight-17" type="text" size=2 maxlength="5" value=""></td>
  <td><input id="mark-17" type="text" size=2 maxlength="5" value=""></td>
</tr>

<tr>
  <td><input id="weight-18" type="text" size=2 maxlength="5" value=""></td>
  <td><input id="mark-18" type="text" size=2 maxlength="5" value=""></td>
</tr>

<tr>
  <td><input id="weight-19" type="text" size=2 maxlength="5" value=""></td>
  <td><input id="mark-19" type="text" size=2 maxlength="5" value=""></td>
</tr>

<tr>
  <td><input id="weight-20" type="text" size=2 maxlength="5" value=""></td>
  <td><input id="mark-20" type="text" size=2 maxlength="5" value=""></td>
</tr>

</table>
<input id="calc-button" type="button" value="Berekenen je gemiddelde"
    onclick="calculator()">

<div id="outputDiv"></div>
</body>
</html>

^Here I get the user input and then run the 'calculator' function.^

function calculator()  {    

  var weight1=document.getElementById('weight-1').value;
  var mark1=document.getElementById('mark-1').value;
  var grade1=weight1*mark1;

  var weight2=document.getElementById('weight-2').value;
  var mark2=document.getElementById('mark-2').value;
  var grade2=weight2*mark2;

  var weight3=document.getElementById('weight-3').value;
  var mark3=document.getElementById('mark-3').value;
  var grade3=weight3*mark3;

  var weight4=document.getElementById('weight-4').value;
  var mark4=document.getElementById('mark-4').value;
  var grade4=weight4*mark4;

  var weight5=document.getElementById('weight-5').value;
  var mark5=document.getElementById('mark-5').value;
  var grade5=weight5*mark5;

  var weight6=document.getElementById('weight-6').value;
  var mark6=document.getElementById('mark-6').value;
  var grade6=weight6*mark6;

  var weight7=document.getElementById('weight-7').value;
  var mark7=document.getElementById('mark-7').value;
  var grade7=weight7*mark7;

  var weight8=document.getElementById('weight-8').value;
  var mark8=document.getElementById('mark-8').value;
  var grade8=weight8*mark8;

  var weight9=document.getElementById('weight-9').value;
  var mark9=document.getElementById('mark-9').value;
  var grade9=weight9*mark9;

  var weight10=document.getElementById('weight-10').value;
  var mark10=document.getElementById('mark-10').value;
  var grade10=weight10*mark10;

  var weight11=document.getElementById('weight-11').value;
  var mark11=document.getElementById('mark-11').value;
  var grade11=weight11*mark11;

  var weight12=document.getElementById('weight-12').value;
  var mark12=document.getElementById('mark-12').value;
  var grade12=weight12*mark12;

  var weight13=document.getElementById('weight-13').value;
  var mark13=document.getElementById('mark-13').value;
  var grade13=weight13*mark13;

  var weight14=document.getElementById('weight-14').value;
  var mark14=document.getElementById('mark-14').value;
  var grade14=weight14*mark14;

  var weight15=document.getElementById('weight-15').value;
  var mark15=document.getElementById('mark-15').value;
  var grade15=weight15*mark15;

  var weight16=document.getElementById('weight-16').value;
  var mark16=document.getElementById('mark-16').value;
  var grade16=weight16*mark16;

  var weight17=document.getElementById('weight-17').value;
  var mark17=document.getElementById('mark-17').value;
  var grade17=weight17*mark17;

  var weight18=document.getElementById('weight-18').value;
  var mark18=document.getElementById('mark-18').value;
  var grade18=weight18*mark18;

  var weight19=document.getElementById('weight-19').value;
  var mark19=document.getElementById('mark-19').value;
  var grade19=weight19*mark19;

  var weight20=document.getElementById('weight-20').value;
  var mark20=document.getElementById('mark-20').value;
  var grade20=weight20*mark20;

var 
totalweight=weight1+weight2+weight3+weight4+ 
weight5+weight6+weight7+weight8+weight9+weight10+ 
weight11+weight12+weight13+weight14+weight15+weight16+ 
weight17+weight18+weight19+weight20;

var    
totalgrade=grade1+grade2+grade3+grade4+ 
grade5+grade6+grade7+grade8+grade9+grade10+ 
grade11+grade12+grade13+grade14+grade15+grade16+
grade17+grade18+grade19+grade20;

  var finalgrade=totalgrade/totalweight;
  var display=document.getElementById('outputDiv');


display.innerHTML='Je gemiddelde is: ' +finalgrade.toFixed(3);
}

^Here i try to add up the user input in the 'total' variables now here it goes wrong and i don't know where. I have been searching for a solution for a couple of days.

PS. here's the link to the pen: https://codepen.io/53N71N3L/pen/JBGYgO

From the [`java` tag description](https://stackoverflow.com/tags/java/info): "*Java (**not to be confused with JavaScript or JScript or JS**) ...*". From the [`javascript` tag description](https://stackoverflow.com/tags/javascript/info): "*JavaScript (**not to be confused with Java**) ...*" — Turing85, Jul 16 '18 at 07:52
Your weights are concatenated as strings not summed up. That's where your problem comes from. — Sorix, Jul 16 '18 at 07:55
Look into loops and using classes instead of ids. Your code could be reduced to 5-6 lines — baao, Jul 16 '18 at 07:57
https://en.m.wikipedia.org/wiki/Don%27t_repeat_yourself a little tip, if you find yourself copy pasting lots of js code, chances are your not doing it right. — Keith, Jul 16 '18 at 07:58

score 0 · Answer 1 · answered Jul 16 '18 at 08:04

0

Your weights are being treated as strings and getting concatenated instead of added by the + operation.

answered Jul 16 '18 at 08:04

Brishna Batool

445
3
15

score 0 · Accepted Answer · answered Jul 16 '18 at 10:02

As mentioned, your weights are being treated as strings. Here i rewrite your code :

function getValue(el){
    return (+document.getElementById(el).value)
};

function calculator()  {    
  var weight1=getValue('weight-1');
    var mark1=getValue('mark-1');
    var grade1=weight1*mark1;

    var weight2=getValue('weight-2');
    var mark2=getValue('mark-2');
    var grade2=weight2*mark2;

    var weight3=getValue('weight-3');
    var mark3=getValue('mark-3');
    var grade3=weight3*mark3;

    var weight4=getValue('weight-4');
    var mark4=getValue('mark-4');
    var grade4=weight4*mark4;

    var weight5=getValue('weight-5');
    var mark5=getValue('mark-5');
    var grade5=weight5*mark5;

    var weight6=getValue('weight-6');
    var mark6=getValue('mark-6');
    var grade6=weight6*mark6;

    var weight7=getValue('weight-7');
    var mark7=getValue('mark-7');
    var grade7=weight7*mark7;

    var weight8=getValue('weight-8');
    var mark8=getValue('mark-8');
    var grade8=weight8*mark8;

    var weight9=getValue('weight-9');
    var mark9=getValue('mark-9');
    var grade9=weight9*mark9;

    var weight10=getValue('weight-10');
    var mark10=getValue('mark-10');
    var grade10=weight10*mark10;

    var weight11=getValue('weight-11');
    var mark11=getValue('mark-11');
    var grade11=weight11*mark11;

    var weight12=getValue('weight-12');
    var mark12=getValue('mark-12');
    var grade12=weight12*mark12;

    var weight13=getValue('weight-13');
    var mark13=getValue('mark-13');
    var grade13=weight13*mark13;

    var weight14=getValue('weight-14');
    var mark14=getValue('mark-14');
    var grade14=weight14*mark14;

    var weight15=getValue('weight-15');
    var mark15=getValue('mark-15');
    var grade15=weight15*mark15;

    var weight16=getValue('weight-16');
    var mark16=getValue('mark-16');
    var grade16=weight16*mark16;

    var weight17=getValue('weight-17');
    var mark17=getValue('mark-17');
    var grade17=weight17*mark17;

    var weight18=getValue('weight-18');
    var mark18=getValue('mark-18');
    var grade18=weight18*mark18;

    var weight19=getValue('weight-19');
    var mark19=getValue('mark-19');
    var grade19=weight19*mark19;

    var weight20=getValue('weight-20');
    var mark20=getValue('mark-20');
    var grade20=weight20*mark20;

  var totalweight=weight1+weight2+weight3+weight4+weight5+weight6+weight7+weight8+weight9+weight10+weight11+weight12+weight13+weight14+weight15+weight16+weight17+weight18+weight19+weight20;
  var totalgrade=grade1+grade2+grade3+grade4+grade5+grade6+grade7+grade8+grade9+grade10+grade11+grade12+grade13+grade14+grade15+grade16+grade17+grade18+grade19+grade20;

  var finalgrade=totalgrade/totalweight;
  var display=document.getElementById('outputDiv');


display.innerHTML='Je gemiddelde is: ' +finalgrade.toFixed(3);
}

The getValue function will make sure you have a return value as number (+ here will parse it as number).

How to calculate average grade in javascript

2 Answers2