javascript - 将字母分配给特定范围内的数字值

Question

这里是一个学习新手。

我需要一个脚本，它可以接受一个数字值并为其分配一个字母，具体取决于该值所属的范围。请运行下面的简单示例:

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

<table>
  <tr>
    <th>Achieved mark</th>
    <th>Grade</th>    
  </tr>
  <tr>
    <td>Above 80 (max 100)</td>
    <td>A</td>    
  </tr>
  <tr>
  	<td>60-79</td>
    <td>B</td> 
  </tr>
  <tr>
  	<td>40-59</td>
    <td>C</td> 
  </tr>
  <tr>
  	<td>Below 39 (min 0)</td>
    <td>D</td> 
  </tr>  
</table>
<br>
<p>Enter achieved mark:</p>
<input type="input" id="mark" value="73">


<button onclick="myFunction()">GO!</button>

<p>Grade result:</p>

<input type="output" id="grade">

对于上面的示例，当“GO!”单击按钮，将根据输入值的范围输出等级字母。

提前谢谢您。

Answer 1

你可以这样做

首先你需要获取你可以获取的元素的值。document.getElementById('mark').value 这个表达式。

现在，根据该值，您可以简单地使用 if 条件来计算成绩。

您需要将其分配给您可以通过此 document.getElementById('grade').value =grade 达到的成绩(输入)

function myFunction(e){
 var ele = document.getElementById('mark').value;
 var grade ='';
 if(ele > 80){
  grade = 'A';
 } else if(ele <=79 && ele >=60){
  grade = 'B';
 } else if(ele <=59 && ele >=40){
  grade = 'C'
 } else {
  grade = 'D';
 }
 document.getElementById('grade').value = grade;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

<table>
  <tr>
    <th>Achieved mark</th>
    <th>Grade</th>    
  </tr>
  <tr>
    <td>Above 80 (max 100)</td>
    <td>A</td>    
  </tr>
  <tr>
  	<td>60-79</td>
    <td>B</td> 
  </tr>
  <tr>
  	<td>40-59</td>
    <td>C</td> 
  </tr>
  <tr>
  	<td>Below 39 (min 0)</td>
    <td>D</td> 
  </tr>  
</table>
<br>
<p>Enter achieved mark:</p>
<input type="input" id="mark" value="73">


<button onclick="myFunction()">GO!</button>

<p>Grade result:</p>

<input type="output" id="grade">