如何在JavaScript中计算平均成绩

Question

我正在尝试创建一个程序，该程序根据用户输入来计算平均成绩。我已经在Codepen中工作，我无法使其正常工作，因为我希望总和的结果与现实不符。

这是我的html和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>

^这里我得到用户输入，然后运行“计算器”功能。^

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

^这里我尝试将用户输入加到'total'变量中 现在这里出错了，我不知道在哪里。我一直在寻找 解决方案几天。

PS。 这是笔的链接：https://codepen.io/53N71N3L/pen/JBGYgO

Answer 1

您的权重被视为字符串并被串联，而不是通过+操作来添加。

Answer 2

如前所述，您的重量被视为弦。 在这里，我重写了您的代码：

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

getValue函数将确保您具有数字返回值（+将其解析为数字）。