Radio button 'onclick' works in Chrome and Firefox but not IE

Question

We are trying to develop a very simple HTML/JavaScript advising tool for students. It gives advice on which courses to take after the student checks radio buttons describing his or her high school GPA and standardized test score. The current version works correctly in both Chrome and Firefox, displaying its results after both radio buttons have been checked. In IE11, the page displays and the user can check buttons, but no response is given when the second button is checked. How should we make this independent of (current) browser?

A stripped-down version is posted below, containing enough code to demonstrate the basic behavior and problem.

    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

Your problem is here, document.data.GPA.value, where the GPA is an array of objects, so you need to access the value like this

document.data.GPA[0].value;

As a side note, the code you posted is filled with obsolete elements, like center, font, so I recommend you do a clean up, and using table for layout is outdated, check out for example flexbox, which is excellent for this

Update

What I mean with read a value of an array of objects is to do something like this

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

There is also document.querySelector

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

Or the classic form.elements syntax

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