为什么我的警告框不会出现在我的 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>