單選按鈕“onclick”適用於 Chrome 和 Firefox 但不適用於 IE

Question

我們正在嘗試為學生開發一個非常簡單的 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>

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;