라디오 버튼 'onclick'은 Chrome 및 Firefox에서 작동하지만 IE는 작동하지 않습니다.

Question

Google은 학생들에게 매우 간단한 HTML/JavaScript 조언 도구를 개발하려고합니다. 학생이 고등학교 평점과 표준 시험 점수를 설명하는 라디오 버튼을 확인한 후 어떤 과목을 수강해야하는지에 대한 조언을 제공합니다. 현재 버전은 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[0].value; 

같은 값에 액세스 할 필요가 귀하의 문제는, 여기에 GPA 객체의 배열입니다 document.data.GPA.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;