如何使用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我目前HV加 -

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>

Answer 2

或者，你可以使用switch语句，如下所示：

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; 
 
      
 
      switch(true) { 
 
      case avg >= 80: 
 
       grade ='H'; 
 
       break; 
 
      case avg >= 60: 
 
       grade ='M'; 
 
       break; 
 
      case avg >= 40: 
 
       grade ='L'; 
 
       break; 
 
      default: 
 
       grade = '-'; 
 
       break; 
 
      } 
 
      
 
      //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> 
 

请注意，switch语句通过表达式评估是真的。当结果与其中一个案例的评估方式相同时，则可以指定适当的等级。该开关的优点是它降低了分级逻辑的复杂性。看到这个resource。