单选按钮'onclick'适用于Chrome和Firefox,但不适用IE

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

本文关键字:IE Firefox 不适用 Chrome onclick 适用于 单选按钮      更新时间:2023-09-26

我们正在尝试为学生开发一个非常简单的HTML/JavaScript建议工具。在学生查看了描述他或她的高中GPA和标准化考试成绩的单选按钮后,它会给出建议,告诉他们该上哪些课程。当前版本在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>

您的问题在这里,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;