How to calculates and show values in JavaScript

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

95 thoughts on “How to calculates and show values in JavaScript”

Leave a Comment