为什么我的警告框不会出现在我的 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/&nbsp; &nbsp; <form name="GPAForm">&nbsp; &nbsp; <table border=3 bgcolor=#ff9999 CELLPADDING="3" CELLSPACING="2">&nbsp; &nbsp; &nbsp; &nbsp; <TH></TH>&nbsp; &nbsp; &nbsp; &nbsp; <TH>Class 1</TH>&nbsp; &nbsp; &nbsp; &nbsp; <TH>Class 2</TH>&nbsp; &nbsp; &nbsp; &nbsp; <TH>Class 3</TH>&nbsp; &nbsp; &nbsp; &nbsp; <TH>Class 4</TH>&nbsp; &nbsp; &nbsp; &nbsp; <TH>Class 5</TH>&nbsp; &nbsp; &nbsp; &nbsp; <TH>Class 6</TH>&nbsp; &nbsp; &nbsp; &nbsp; <TR>&nbsp; &nbsp; &nbsp; &nbsp; <TD>Grade</TD>&nbsp; &nbsp; &nbsp; &nbsp; <TD><input type=text size=5 name="grade1" ALIGN=TOP MAXLENGTH=5></TD>&nbsp; &nbsp; &nbsp; &nbsp; <TD><input type=text size=5 name="grade2" ALIGN=TOP MAXLENGTH=5></TD>&nbsp; &nbsp; &nbsp; &nbsp; <TD><input type=text size=5 name="grade3" ALIGN=TOP MAXLENGTH=5></TD>&nbsp; &nbsp; &nbsp; &nbsp; <TD><input type=text size=5 name="grade4" ALIGN=TOP MAXLENGTH=5></TD>&nbsp; &nbsp; &nbsp; &nbsp; <TD><input type=text size=5 name="grade5" ALIGN=TOP MAXLENGTH=5></TD>&nbsp; &nbsp; &nbsp; &nbsp; <TD><input type=text size=5 name="grade6" ALIGN=TOP MAXLENGTH=5></TD>&nbsp; &nbsp; &nbsp; &nbsp;</TR>&nbsp; &nbsp; &nbsp; &nbsp;<TR ALIGN=CENTER>&nbsp; &nbsp; &nbsp; &nbsp;<TD colspan=7> <input type="button" VALUE="Calculate Your GPA!" name ="calc" OnClick="calcGrade()">&nbsp; &nbsp; &nbsp; &nbsp;</TD>&nbsp; &nbsp; &nbsp; &nbsp;</TR>&nbsp; &nbsp; &nbsp; &nbsp;</table>&nbsp; &nbsp; &nbsp; &nbsp;</form>&nbsp; &nbsp; &nbsp; &nbsp;<BR>&nbsp; &nbsp; &nbsp; &nbsp;<script>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var gradeCredit = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "A": 4.0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "A-": 3.67,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "B+": 3.33,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "B": 3.0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "B-": 2.67,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "C+": 2.33,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "C": 2.0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "C-": 1.67,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "D": 1.0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "F": 0&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var calcGrade = function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; grade1 = document.GPAForm.grade1.value;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; grade2 = document.GPAForm.grade2.value;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; grade3 = document.GPAForm.grade3.value;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; grade4 = document.GPAForm.grade4.value;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; grade5 = document.GPAForm.grade5.value;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; grade6 = document.GPAForm.grade6.value;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; finalGPA = ((gradeCredit[grade1] + gradeCredit[grade2] + gradeCredit[grade3] + gradeCredit[grade4] + gradeCredit[grade5] + gradeCredit[grade6]) / 6);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert("GPA =&nbsp; " + finalGPA)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </script>从您的代码来看，存在多个问题主要问题是使用，document.GPAForm.因为它是表单的名称不要使用LANGUAGE=javascript、保留<script>或使用<script type="text/javascript" >其他小问题<CENTER> html 标签已被弃用ALIGN=CENTER 属性也已被弃用使用 CSS 进行样式修复以修复以上两个代码“ALIGN=CENTER”之前的 TR 标签缺少结束标签

Answer 2

您可以通过名称访问表单document.GPAForm。并且您应该从总和中删除无效输入，否则它将是NaN（理想情况下您还应该将输入转换为大写字母）。<CENTER>&nbsp; <form Name="GPAForm">&nbsp; &nbsp; <table border=3 bgcolor=#ff9999 CELLPADDING="3" CELLSPACING="2">&nbsp; &nbsp; &nbsp; <TH></TH>&nbsp; &nbsp; &nbsp; <TH>Class 1</TH>&nbsp; &nbsp; &nbsp; <TH>Class 2</TH>&nbsp; &nbsp; &nbsp; <TH>Class 3</TH>&nbsp; &nbsp; &nbsp; <TH>Class 4</TH>&nbsp; &nbsp; &nbsp; <TH>Class 5</TH>&nbsp; &nbsp; &nbsp; <TH>Class 6</TH>&nbsp; &nbsp; &nbsp; <TR>&nbsp; &nbsp; &nbsp; &nbsp; <TD>Grade</TD>&nbsp; &nbsp; &nbsp; &nbsp; <TD><input type=text size=5 name="grade1" ALIGN=TOP MAXLENGTH=5></TD>&nbsp; &nbsp; &nbsp; &nbsp; <TD><input type=text size=5 name="grade2" ALIGN=TOP MAXLENGTH=5></TD>&nbsp; &nbsp; &nbsp; &nbsp; <TD><input type=text size=5 name="grade3" ALIGN=TOP MAXLENGTH=5></TD>&nbsp; &nbsp; &nbsp; &nbsp; <TD><input type=text size=5 name="grade4" ALIGN=TOP MAXLENGTH=5></TD>&nbsp; &nbsp; &nbsp; &nbsp; <TD><input type=text size=5 name="grade5" ALIGN=TOP MAXLENGTH=5></TD>&nbsp; &nbsp; &nbsp; &nbsp; <TD><input type=text size=5 name="grade6" ALIGN=TOP MAXLENGTH=5></TD>&nbsp; &nbsp; &nbsp; &nbsp; <TR ALIGN=CENTER>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TD colspan=7> <input type="button" VALUE="Calculate Your GPA!" name="calc" OnClick="calcGrade()">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </TD>&nbsp; &nbsp; &nbsp; &nbsp; </TR>&nbsp; &nbsp; </TABLE>&nbsp; </FORM>&nbsp; <BR>&nbsp; <P>&nbsp; &nbsp; <P></CENTER><script LANGUAGE="JavaScript">&nbsp; var gradeCredit = {&nbsp; &nbsp; "A": 4.0,&nbsp; &nbsp; "A-": 3.67,&nbsp; &nbsp; "B+": 3.33,&nbsp; &nbsp; "B": 3.0,&nbsp; &nbsp; "B-": 2.67,&nbsp; &nbsp; "C+": 2.33,&nbsp; &nbsp; "C": 2.0,&nbsp; &nbsp; "C-": 1.67,&nbsp; &nbsp; "D": 1.0,&nbsp; &nbsp; "F": 0&nbsp; }&nbsp; var calcGrade = function() {&nbsp; // You can access the form by its name&nbsp; &nbsp; var grade1 = document.GPAForm.grade1.value;&nbsp; &nbsp; var grade2 = document.GPAForm.grade2.value;&nbsp; &nbsp; var grade3 = document.GPAForm.grade3.value;&nbsp; &nbsp; var grade4 = document.GPAForm.grade4.value;&nbsp; &nbsp; var grade5 = document.GPAForm.grade5.value;&nbsp; &nbsp; var grade6 = document.GPAForm.grade6.value;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; // You should remove invalid inputs from the sum&nbsp; &nbsp; // Ideally you should also cast the letters to uppercase letters&nbsp; &nbsp; var finalGPA = gradeCredit[grade1] || 0&nbsp; &nbsp; &nbsp; + gradeCredit[grade2] || 0&nbsp; &nbsp; &nbsp; + gradeCredit[grade3] || 0&nbsp; &nbsp; &nbsp; + gradeCredit[grade4] || 0&nbsp; &nbsp; &nbsp; + gradeCredit[grade5] || 0&nbsp; &nbsp; &nbsp; + gradeCredit[grade6] || 0&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; finalGPA = finalGPA / 6;&nbsp; &nbsp; alert("GPA =&nbsp; " + finalGPA)&nbsp; }</script></main>