为什么我的警告框不会出现在我的 Javascript/HTML 代码中？

Question

我目前正在编写一个非常简单的网页来计算 GPA。 我正在使用一个表格，然后使用 Javascript 使用两个函数来计算和显示最终 GPA。

我可能错误地完成了这些功能，但我无法弄清楚我做错了什么。 当我点击“计算”按钮时，我编程的警告框没有出现。

 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

在这里查看工作代码： 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>

从您的代码中，有多个问题

主要问题是

• 使用document.GPAForm. 因为它是表单的名称
• 不要使用LANGUAGE=javascript ，保留<script>或使用<script type="text/javascript" >

其他小问题

• <CENTER> html 标签已被弃用
• ALIGN=CENTER属性也已被弃用

使用 CSS 进行造型以修复以上两个代码

• “ALIGN=CENTER”之前的 TR 标签缺少结束标签

Answer 2

编辑您可以通过其名称document.GPAForm访问表单。 并且您应该从总和中删除无效输入，否则它将是NaN （理想情况下，您还应该将输入转换为大写字母）。

 <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

这可能比您要寻找的要复杂得多，但是出于某种原因，您的问题启发了我。 我将您的输入框更改为下拉菜单，以便用户不会意外输入您不想要的值。 还添加了错误捕获，以防有人单击计算按钮但未输入任何成绩。

 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>