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.

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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.