html - How to calculates and show values in JavaScript

Question

I created a form for calculating the final Grade from exam results. The calculation to get the final Mark for the final Grade Final Mark=((Labs(10) + Assignment(20)+Final Exam(70))/100

When clicking on the calculate button, the final marks should be calculated and the relevant final grade should be shown on the named txtFinalGr text box. After the calculation, it should be shown on txtFinalGr.

I tried to more times to get results. but it is not shown. I need help to fix these errors.

The form code as follows.

    <form id="gradeForm"> 
    <table>
        <tr>
            <td><label>Labs</label></td>
            <td><input type="text" id="txtLabs" name="txtLabs"></td>
        </tr>
        <tr>
            <td><label>Assignment</label></td>
            <td><input type="text" id="txtAssign" name="txtAssign"></td>
        </tr>
        <tr>
            <td><label>Final Exam</label></td>
            <td><input type="text" id="txtFinalEx" name="txtFinalEx"></td>
        </tr>
        <tr>
            <td><label>Final Grade</label></td>
            <td><input type="text" id="txtFinalGr" readonly></span></td>
        </tr>
        <tr>
            <td><input type="button" id="btnClr" onClick="clrForm()" name="btnClr" value="Clear"></td>
            <td><input type="button" id="bunCal" onClick="getGrade()" name="bunCal" value="Calculate"></td>
        </tr>
    </table>
</form>

also, The script as follows.

    <script>
    function getGrade(){

        var grade = "";  //declare a variable for grade
                

                //read the marks
                var resLabs = document.getElementById('txtLabs').value;
                var resAssign = document.getElementById('txtAssign').value;
                var resFinalEx = document.getElementById('txtFinalEx').value;
                
                var calRes = (($resLabs*10)+($resAssign*20)+($resFinal*70))/100;
                                
                switch(

                        (calRes > 75 && calRes <= 100) ? 1 : 
                        (calRes > 60 && calRes < 74) ? 2 : 
                        (calRes > 50 && calRes < 59) ? 3 :
                        (calRes > 40 && calRes < 49) ? 4 :
                        (calRes > 30 && calRes < 39) ? 5 : 
                        (calRes > 0 && calRes < 29) ? 6 
                      )
                        
                        {
                            case 1 :grade = "A";break;
                            case 2 :grade = "B";break;
                            case 3 :grade = "C";break;
                            case 4 :grade = "D";break;
                            case 5 :grade = "E";break;
                            case 6 :grade = "F";break;
                        }
                        
                    

                document.getElementById('txtFinalGr').value = grade;    
    
    }

    function clrForm() {
        document.getElementById("gradeForm").reset();
    }
</script>

Thank you !!

question from:https://stackoverflow.com/questions/65937773/how-to-calculates-and-show-values-in-javascript

Answer 1

There are several issues with your code:

• Variable names don't match, eg. resLabs vs $resLabs. Names must always be exactly the same; e.g. both without a $, or both with a $ (the $ has no special meaning, it is just a character that can be part of a variable name).
• You use input box values as if they are numbers, but actually these are strings. Better use parseFloat() or parseInt().
• You divide by 100, which only makes sense if the grades go from 1 to 100. If the grades go from 1 to 10 (which is normal where I live), then you would need to divide by 10. I kept using / 100 below so the grades need to go from 1...100.
• Your switch is very complicated, and it misses a bunch of cases. E.g. when calRes is 74 or 75, then there is no condition that will match it. I fixed this below. (And it can even be simplified further, see later on)
• The last ternary operator ? 6 does not have the required : and code will not compile as a result.
• The code assumes "happy input": it expects only valid grades (in this case 1...100). What if someone types "ABC" or "12345"...

Here is a version that fixes most issues:

function getGrade() {
  var grade = ""; //declare a variable for grade

  //read the marks
  var resLabs = parseFloat(document.getElementById('txtLabs').value);
  var resAssign = parseFloat(document.getElementById('txtAssign').value);
  var resFinalEx = parseFloat(document.getElementById('txtFinalEx').value);

  var calRes = ((resLabs * 10) + (resAssign * 20) + (resFinalEx * 70)) / 100;
  console.log("calRes: " + calRes);
  switch (
    (calRes > 75 && calRes <= 100) ? 1 :
    (calRes > 60) ? 2 :
    (calRes > 50) ? 3 :
    (calRes > 40) ? 4 :
    (calRes > 30) ? 5 :
    (calRes > 0) ? 6 : 0
  )
  {
    case 1:
      grade = "A";
      break;
    case 2:
      grade = "B";
      break;
    case 3:
      grade = "C";
      break;
    case 4:
      grade = "D";
      break;
    case 5:
      grade = "E";
      break;
    case 6:
      grade = "F";
      break;
    default:
      grade = "???";
      break;
  }
  document.getElementById('txtFinalGr').value = grade;
}

<form id="gradeForm">
  <table>
    <tr>
      <td><label>Labs</label></td>
      <td><input type="text" id="txtLabs" name="txtLabs"></td>
    </tr>
    <tr>
      <td><label>Assignment</label></td>
      <td><input type="text" id="txtAssign" name="txtAssign"></td>
    </tr>
    <tr>
      <td><label>Final Exam</label></td>
      <td><input type="text" id="txtFinalEx" name="txtFinalEx"></td>
    </tr>
    <tr>
      <td><input type="button" id="btnClr" onClick="clrForm()" name="btnClr" value="Clear"></td>
      <td><input type="button" id="bunCal" onClick="getGrade()" name="bunCal" value="Calculate"></td>
    </tr>
    <tr>
      <td><label>Final Grade</label></td>
      <td><input type="text" id="txtFinalGr" readonly></td>
    </tr>
  </table>
</form>