Assign a letter to a number value within a specific range

Question

a learning noobie here.

I am needing a script that can take a number value and assign a letter to it, depending on the range the value falls within. Please run the simple example below:

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">

For this above example, when the "GO!" button is clicked, a grade letter would be output depending on the range of the input value.

Thank you in advance.

Where's your code? What have you tried so far? – Sebastian Speitel Dec 12 '18 at 12:46 — Sebastian Speitel, Dec 12 '18 at 12:46

score 2 · Accepted Answer · answered Dec 12 '18 at 12:57

You can do it like this

First thing is you need to get the value of element that you can get by. document.getElementById('mark').value this expression.

Now based on this value you can calculate grade by simply using if conditions.

Than you need to assign it to your grade (input) that you can achieve by this 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">

Thank you so much for the helpful explanation. I have always wondered what these IF conditions are used for, and now I get to make use of it. Thanks again. — JohnGIS, Dec 12 '18 at 13:08

score 2 · Answer 2 · edited Dec 12 '18 at 14:06

Return a string based on the current grade.

const myFunction = (grade) => {
  let mark = null;
  if (grade >= 80 && grade <= 100) {
    mark = 'A';
  } else if (grade >= 60 && grade <= 79) {
    mark = 'B';
  } else if (grade >= 40 && grade <= 59) {
    mark = 'C'
  } else if (grade <= 39) {
    mark = 'Dude?';
  } else {
    return false;
  }

  return mark;
}

const grade = myFunction(60);

console.log(grade);

You can also use this utility if you want to make it shorter.

// Check a range of numbers in an if condition

score 2 · Answer 3 · answered Dec 12 '18 at 13:00

Simple else if condition:

function myFunction() {
  var num = document.getElementById('mark').value;
  var result = 'A';

  num = Math.min(100, Math.max(0, num));
  
  if (num < 40) {
    result = 'D';
  } else if (num < 60) {
    result = 'C';
  } else if (num < 80) {
    result = 'B';
  }
  
  document.getElementById('grade').value = result;
}

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">

score 0 · Answer 4 · answered Dec 13 '18 at 08:19

You can also try below one.

 const grades = {
    100: 'A',
    80: 'B',
    60: 'C',
    40: 'D'
  };

  function myFunction() {
    const ele = document.getElementById('mark').value;
    let grade = 'Invalid input';
    for (const g in grades) {
      if (parseInt(ele) < parseInt(g)) {
        grade = grades[g];
        break;
      }
    }
    document.getElementById('grade').value = grade;
  }

It has the flexibility to configure the grades and also handling the invalid cases.

Assign a letter to a number value within a specific range

4 Answers4