javascript - 单选按钮 'onclick' 在 Chrome 和 Firefox 中有效，但在 IE 中无效

Question

我们正在尝试为学生开发一个非常简单的 HTML/JavaScript 咨询工具。在学生检查描述其高中 GPA 和标准化考试成绩的单选按钮后，它会就选修哪些类(class)提供建议。当前版本在 Chrome 和 Firefox 中都能正常工作，在选中两个单选按钮后显示其结果。在IE11中，页面显示并且用户可以检查按钮，但是当检查第二个按钮时没有给出任何响应。我们应该如何使其独立于(当前)浏览器？

下面发布了一个精简版本，其中包含足够的代码来演示基本行为和问题。

    function calc() {

      //sets all the variables to blank
      gpa109 = ""
      gpa115 = ""
      note = ""

      //The value of the GPA radio button input is set in the GPA variable (first button=1, etc...)
      GPA = document.data.GPA.value

      //The value of the ACT radio button input is set in the ACT variable (first button=1, etc...)
      ACT = document.data.ACT.value

      //Use if-then statements to assign gpa output values to variables based on GPA and ACT inputs
      //gpa output variables are gpa109, gpa115, gpa109120, etc...
      //the note in the text box at the end is in variable "note"

      if (GPA == 1) {
        if (ACT == 1) {
          gpa109 = "0.91"
        }
      }
      if (GPA == 1) {
        if (ACT == 1) {
          gpa115 = "No Data"
        }
      }
      if (GPA == 1) {
        if (ACT == 2) {
          gpa109 = "1.50"
        }
      }
      if (GPA == 1) {
        if (ACT == 2) {
          gpa115 = "No Data"
        }
      }
      if (GPA == 2) {
        if (ACT == 1) {
          gpa109 = "1.68"
        }
      }
      if (GPA == 2) {
        if (ACT == 1) {
          gpa115 = "No Data"
        }
      }
      if (GPA == 2) {
        if (ACT == 2) {
          gpa109 = "1.98"
        }
      }
      if (GPA == 2) {
        if (ACT == 2) {
          gpa115 = "1.27"
        }
      }
      if (GPA == 1) {
        if (ACT == 1) {
          note = "we are worried about you."
        }
      }
      if (GPA == 1) {
        if (ACT == 2) {
          note = "slacked off a bit in high school, did you not?"
        }
      }
      if (GPA == 2) {
        if (ACT == 1) {
          note = "you are a classic bad standardized test taker."
        }
      }
      if (GPA == 2) {
        if (ACT == 2) {
          note = "you should probably apply to a better college."
        }
      }

      //These statements put all the values determined by the if-then statements into the document

      document.data.gpa109.value = gpa109
      document.data.gpa115.value = gpa115
      document.data.note.value = note

    }

<form name="data">

  <table COLS=4 cellpadding=2 border=1 align=center>

    <tr>
      <td COLSPAN="4">
        <center><b><font size=+2>
    <p>
    Advising Tool
    </p></font></b>
        </center>
      </td>
    </tr>

    <tr>

      <td COLSPAN="2">
        <center><font size=+1>
    
    <p>
    What was your High School GPA?
    </p>
      </font>
        </center>
      </td>

      <td COLSPAN="2">
        <center><font size=+1>
    <p>
    What was your ACT Math subscore?
    <p>
      </font>
        </center>
      </td>

    </tr>

    <tr>
      <td COLSPAN="2">
        <center>
          <font size=+1>
    
    <P>
    <input type="radio" name="GPA" value="1" onclick="calc();"> Less than 3.5<br>
    <input type="radio" name="GPA" value="2" onclick="calc();"> 3.5 or greater<br>
      </P></font>
        </center>
      </td>

      <td COLSPAN="2">
        <center><font size=+1>
    <P>
    <input type="radio" name="ACT" value="1" onclick="calc();"> Less than 26<br>
    <input type="radio" name="ACT" value="2" onclick="calc();"> 26 or greater<br>
      </P>      </font>
        </center>
      </td>
    </tr>

    <tr>
      <td COLSPAN="4" align="center">
        <font size=+1>
    <br>
     Over the past 5 years, students with similar high school GPAs and ACT Math<br>scores had the following average GPA in their introductory CHM courses.
    <br>
    <br>
            </font>
      </td>
    </tr>

    <tr>
      <td align="right">
        Classes Taken
      </td>

      <td>
        Average GPA
      </td>

    </tr>

    <tr>
      <td align="right">
        CHM 109 Only
      </td>

      <td>
        <input name="gpa109" size="10" type="text">
      </td>

      <tr>
        <td align="right">
          CHM 115 Only
        </td>

        <td>
          <input type="text" name="gpa115" size="10">
        </td>


        <tr>
          <td COLSPAN="4" align="center">

            <textarea rows="2" cols="100" name="note">
            </textarea>

          </td>
        </tr>

  </table>
</form>

Answer 1

你的问题就在这里，document.data.GPA.value，其中GPA是一个对象数组，所以你需要像这样访问该值

document.data.GPA[0].value;

顺便说一句，您发布的代码充满了过时的元素，例如 center、font，因此我建议您进行清理，并且使用 table 进行布局已经过时了，请查看例如 flexbox，这非常适合

更新

我的意思是读取对象数组的值是做这样的事情

var v = document.querySelectorAll('input[name=GPA]');
for(var i = 0; i < v.length; i++){
    if(v[i].checked){
        GPA = v[i].value;
    }
}

还有document.querySelector

GPA = document.querySelector('input[name=GPA]:checked').value;

或者经典的 form.elements 语法

document.data.elements['GPA'].value;