javascript - 使用javascript给出一些条件语句时如何计算一定的成绩

Question

这里我计算了一些 PO(程序结果)的平均值。计算平均值后，我必须通过比较一些条件语句来显示达到的水平或说等级。条件是:

1. 如果平均 >= 80 ，成就将是'H' .
2. 如果平均 >= 60但是< 80 ，成就将是'M' .
3. 如果平均 >= 40但是< 60 ，成就将是'L' .

我计算了平均值，但找不到计算达到水平的逻辑。下面给出了我所做的部分代码。

<script type="text/jscript">
  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;
  }
</script>
<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>
  </tr>
  <tr>
    <td width="7%" align="center">PO1</td>
    <td width="7%" align="center">PO2</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');" 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');" 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');" 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');" 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>
  <tr>
    <td height="71" align="center">PO ATTAINMENT</td>
    <td align="center"><input type="text" name="Att1" id="calatt1" readonly style="width:60px">&nbsp;</td>
    <td align="center"><input type="text" name="Att2" id="calatt2" readonly style="width:60px">&nbsp;</td>
  </tr>
</table>

如何在计算平均值后立即自动显示达到水平？

Answer 1

使用if else ladder :

您需要处理好您的结果不会大于 100 且不为负数。你还没有处理过这个问题。此外，您还需要将当前我添加的成就设置为少于 40 -

function calcAvg(input_id, output_id, att_id) {
  //Get all elements with 'class="select"'
  var selects = document.getElementsByClassName(input_id);
  //Initialize vars
  var avg = 0;
  var count = 0;
  var grade = 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;

  if (avg >= 80)
    grade = 'h';
  else if (avg >= 60)
    grade = 'm';
  else if (avg >= 40)
    grade = 'l'
  else
    grade = '-'

  //Output average
  document.getElementById(att_id).value = grade;
}

<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>
  </tr>
  <tr>
    <td width="7%" align="center">PO1</td>
    <td width="7%" align="center">PO2</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','calatt1');" 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','calatt2');" 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','calatt1');" 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','calatt2');" 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>
  <tr>
    <td height="71" align="center">PO ATTAINMENT</td>
    <td align="center"><input type="text" name="Att1" id="calatt1" readonly style="width:60px">&nbsp;</td>
    <td align="center"><input type="text" name="Att2" id="calatt2" readonly style="width:60px">&nbsp;</td>
  </tr>
</table>