如何使用javascript給出一些條件語句時計算某個等級

這裏我計算了一些PO（程序結果）的平均值。在計算平均數後，我必須通過比較一些條件陳述來顯示達到水平或說成績。條件是：如何使用javascript給出一些條件語句時計算某個等級

如果平均值爲>= 80，則達到的值爲'H'。
如果平均值爲>= 60但是< 80，則達到的值爲'M'。
如果平均值爲>= 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>

是如何將平均計算後立即自動顯示達成水平？

來源

2017-05-18 Debasish Choudhury

使用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>

來源

2017-05-18 22:42:06 Omi

謝謝@RobG我已經做了修改 – Omi

或者，你可以使用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。

來源

2017-05-18 23:04:34 slevy1

如何使用javascript給出一些條件語句時計算某個等級

回答

相關問題