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