Why won't my alert box appear in my Javascript/HTML code?

Question

I am currently writing a very simple webpage to calculate GPA. I am utilizing a form and then using Javascript to use two functions to calculate and show the final GPA.

I might have done the functions incorrectly, but I can't figure out what I'm doing wrong. When I hit the "Calculate" button, the alert box I programmed does not appear.

 var gradeCredit = { "A": 4.0, "A-": 3.67, "B+": 3.33, "B": 3.0, "B-": 2.67, "C+": 2.33, "C": 2.0, "C-": 1.67, "D": 1.0, "F": 0 } var calcGrade = function() { grade1 = document.form.grade1.value; grade2 = document.form.grade2.value; grade3 = document.form.grade3.value; grade4 = document.form.grade4.value; grade5 = document.form.grade5.value; grade6 = document.form.grade6.value; finalGPA = ((gradeCredit[grade1] + gradeCredit[grade2] + gradeCredit[grade3] + gradeCredit[grade4] + gradeCredit[grade5] + gradeCredit[grade6]) / 6); alert("GPA = " + finalGPA) }

 <CENTER> <form Name="GPAForm"> <table border=3 bgcolor=#ff9999 CELLPADDING="3" CELLSPACING="2"> <TH></TH> <TH>Class 1</TH> <TH>Class 2</TH> <TH>Class 3</TH> <TH>Class 4</TH> <TH>Class 5</TH> <TH>Class 6</TH> <TR> <TD>Grade</TD> <TD><input type=text size=5 name="grade1" ALIGN=TOP MAXLENGTH=5></TD> <TD><input type=text size=5 name="grade2" ALIGN=TOP MAXLENGTH=5></TD> <TD><input type=text size=5 name="grade3" ALIGN=TOP MAXLENGTH=5></TD> <TD><input type=text size=5 name="grade4" ALIGN=TOP MAXLENGTH=5></TD> <TD><input type=text size=5 name="grade5" ALIGN=TOP MAXLENGTH=5></TD> <TD><input type=text size=5 name="grade6" ALIGN=TOP MAXLENGTH=5></TD> <TR ALIGN=CENTER> <TD colspan=7> <input type="button" VALUE="Calculate Your GPA!" name ="calc" OnClick="calcGrade()"> </TD> </TR> </TABLE> </FORM> <BR> <P> <P> </CENTER>

Answer 1

See the working code here: https://jsfiddle.net/y8fb9ctd/

    <form name="GPAForm">
    <table border=3 bgcolor=#ff9999 CELLPADDING="3" CELLSPACING="2">
        <TH></TH>
        <TH>Class 1</TH>
        <TH>Class 2</TH>
        <TH>Class 3</TH>
        <TH>Class 4</TH>
        <TH>Class 5</TH>
        <TH>Class 6</TH>

        <TR>
        <TD>Grade</TD>
        <TD><input type=text size=5 name="grade1" ALIGN=TOP MAXLENGTH=5></TD>
        <TD><input type=text size=5 name="grade2" ALIGN=TOP MAXLENGTH=5></TD>
        <TD><input type=text size=5 name="grade3" ALIGN=TOP MAXLENGTH=5></TD>
        <TD><input type=text size=5 name="grade4" ALIGN=TOP MAXLENGTH=5></TD>
        <TD><input type=text size=5 name="grade5" ALIGN=TOP MAXLENGTH=5></TD>
        <TD><input type=text size=5 name="grade6" ALIGN=TOP MAXLENGTH=5></TD>

       </TR>

       <TR ALIGN=CENTER>
       <TD colspan=7> <input type="button" VALUE="Calculate Your GPA!" name ="calc" OnClick="calcGrade()">
       </TD>
       </TR>
       </table>
       </form>
       <BR>

       <script>

           var gradeCredit = {
                "A": 4.0,
                "A-": 3.67,
                "B+": 3.33,
                "B": 3.0,
                "B-": 2.67,
                "C+": 2.33,
                "C": 2.0,
                "C-": 1.67,
                "D": 1.0,
                "F": 0
            }

            var calcGrade = function() {
                grade1 = document.GPAForm.grade1.value;
                grade2 = document.GPAForm.grade2.value;
                grade3 = document.GPAForm.grade3.value;
                grade4 = document.GPAForm.grade4.value;
                grade5 = document.GPAForm.grade5.value;
                grade6 = document.GPAForm.grade6.value;
                finalGPA = ((gradeCredit[grade1] + gradeCredit[grade2] + gradeCredit[grade3] + gradeCredit[grade4] + gradeCredit[grade5] + gradeCredit[grade6]) / 6);
                alert("GPA =  " + finalGPA)
            }

            </script>

From your code, there are multiple issues

The main problem is

• Use document.GPAForm. since it is the name of the form
• do not use LANGUAGE=javascript , keep <script> or use <script type="text/javascript" >

Other minor problems

• <CENTER> html tag has been deprecated
• ALIGN=CENTER attribute has also been deprecated

use CSS for styling to fix above two codesmells

• The TR tag before "ALIGN=CENTER" was missing a closing tag

Answer 2

Edit You can access the form by its name document.GPAForm . And you should remove invalid inputs from the sum, otherwise it will be NaN (ideally you should also cast the input to uppercase letters).

 <CENTER> <form Name="GPAForm"> <table border=3 bgcolor=#ff9999 CELLPADDING="3" CELLSPACING="2"> <TH></TH> <TH>Class 1</TH> <TH>Class 2</TH> <TH>Class 3</TH> <TH>Class 4</TH> <TH>Class 5</TH> <TH>Class 6</TH> <TR> <TD>Grade</TD> <TD><input type=text size=5 name="grade1" ALIGN=TOP MAXLENGTH=5></TD> <TD><input type=text size=5 name="grade2" ALIGN=TOP MAXLENGTH=5></TD> <TD><input type=text size=5 name="grade3" ALIGN=TOP MAXLENGTH=5></TD> <TD><input type=text size=5 name="grade4" ALIGN=TOP MAXLENGTH=5></TD> <TD><input type=text size=5 name="grade5" ALIGN=TOP MAXLENGTH=5></TD> <TD><input type=text size=5 name="grade6" ALIGN=TOP MAXLENGTH=5></TD> <TR ALIGN=CENTER> <TD colspan=7> <input type="button" VALUE="Calculate Your GPA:" name="calc" OnClick="calcGrade()"> </TD> </TR> </TABLE> </FORM> <BR> <P> <P> </CENTER> <script LANGUAGE="JavaScript"> var gradeCredit = { "A". 4,0: "A-". 3,67: "B+". 3,33: "B". 3,0: "B-". 2,67: "C+". 2,33: "C". 2,0: "C-". 1,67: "D". 1,0: "F". 0 } var calcGrade = function() { // You can access the form by its name var grade1 = document.GPAForm.grade1;value. var grade2 = document.GPAForm.grade2;value. var grade3 = document.GPAForm.grade3;value. var grade4 = document.GPAForm.grade4;value. var grade5 = document.GPAForm.grade5;value. var grade6 = document.GPAForm.grade6;value; // You should remove invalid inputs from the sum // Ideally you should also cast the letters to uppercase letters var finalGPA = gradeCredit[grade1] || 0 + gradeCredit[grade2] || 0 + gradeCredit[grade3] || 0 + gradeCredit[grade4] || 0 + gradeCredit[grade5] || 0 + gradeCredit[grade6] || 0 finalGPA = finalGPA / 6; alert("GPA = " + finalGPA) } </script> </main>

Answer 3

This could be way more complicated than you are looking for, but for some reason your question inspired me. I changed your input boxes into dropdowns so that the user cannot accidentally enter a value that you don't want. Also added error catching in case someone clicks te calculate button but didn't enter any grades.

 var GPA = document.GPAForm; document.getElementById("calc").addEventListener("click", function() { var num = 0; var den = 0; var dropdowns = GPA.getElementsByTagName("select"); for (var i = 0; i < dropdowns.length; i++) { if (dropdowns[i].value.= "") { num += Number(dropdowns[i];value); den += 1. } } if (den === 0) { alert("Please enter at least one grade.") } else { alert("GPA = " + (num/den);toFixed(2)); } })

 table { margin-left: auto; margin-right: auto; }

 <form Name="GPAForm"> <table border=3 bgcolor=#ff9999 CELLPADDING="3" CELLSPACING="2"> <tr> <TH></TH> <TH>Class 1</TH> <TH>Class 2</TH> <TH>Class 3</TH> <TH>Class 4</TH> <TH>Class 5</TH> <TH>Class 6</TH> </tr> <tr> <TD>Grade</TD> <TD><select name="grade1"> <option value=""></option> <option value="4">A</option> <option value="3.67">A-</option> <option value="3.33">B+</option> <option value="3">B</option> <option value="2.67">B-</option> <option value="2.33">C+</option> <option value="2">C</option> <option value="1.67">C-</option> <option value="1">D</option> <option value="0">F</option> </select></TD> <TD><select name="grade2"> <option value=""></option> <option value="4">A</option> <option value="3.67">A-</option> <option value="3.33">B+</option> <option value="3">B</option> <option value="2.67">B-</option> <option value="2.33">C+</option> <option value="2">C</option> <option value="1.67">C-</option> <option value="1">D</option> <option value="0">F</option> </select></TD> <TD><select name="grade3"> <option value=""></option> <option value="4">A</option> <option value="3.67">A-</option> <option value="3.33">B+</option> <option value="3">B</option> <option value="2.67">B-</option> <option value="2.33">C+</option> <option value="2">C</option> <option value="1.67">C-</option> <option value="1">D</option> <option value="0">F</option> </select></TD> <TD><select name="grade4"> <option value=""></option> <option value="4">A</option> <option value="3.67">A-</option> <option value="3.33">B+</option> <option value="3">B</option> <option value="2.67">B-</option> <option value="2.33">C+</option> <option value="2">C</option> <option value="1.67">C-</option> <option value="1">D</option> <option value="0">F</option> </select></TD> <TD><select name="grade5"> <option value=""></option> <option value="4">A</option> <option value="3.67">A-</option> <option value="3.33">B+</option> <option value="3">B</option> <option value="2.67">B-</option> <option value="2.33">C+</option> <option value="2">C</option> <option value="1.67">C-</option> <option value="1">D</option> <option value="0">F</option> </select></TD> <TD><select name="grade6"> <option value=""></option> <option value="4">A</option> <option value="3.667">A-</option> <option value="3.333">B+</option> <option value="3">B</option> <option value="2.667">B-</option> <option value="2.333">C+</option> <option value="2">C</option> <option value="1.667">C-</option> <option value="1">D</option> <option value="0">F</option> </select></TD> </tr> <tr ALIGN=CENTER> <TD colspan=7> <input type="button" VALUE="Calculate Your GPA!" id ="calc"></TD> </tr> </table> </form>