单选按钮'onclick'适用于Chrome和Firefox,但不适用IE
Radio button 'onclick' works in Chrome and Firefox but not IE
我们正在尝试为学生开发一个非常简单的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;
相关文章:
- 为什么这在IE中的工作方式与在Firefox中不同
- IE/Chrome中未定义的函数,但Firefox中没有
- 滚动在Chrome中有效,但在Firefox或IE中无效
- document.images未加载在chrome或firefox上,但已加载在IE上
- 为什么这个按钮在IE中有效,但在Firefox中无效
- 无法在IE、Firefox中使用adobeacrobat9pro调试PDF中的javascript
- 以下颜色更改功能在IE9和Firefox中运行良好,但在早期的IE或Chrome中则不然
- 通过单击主菜单外部关闭子菜单'不适用于IE,但适用于Firefox&铬
- jquery表单提交无法使用多个输入(IE和Firefox)
- Multi-platform (Chrome, IE, Firefox)
- contentEditable and lastChild IE, Firefox & Chrome LastC
- onblur事件在IE/Firefox/Chrome中有所区别
- Javascript代码关闭标签,适用于IE, Firefox和Chrome
- window.print()对话框在IE, Firefox和Safari中正常工作时,在Chrome中不显示
- IE/Firefox气泡事件
- MarginLeft不工作在IE/Firefox内的功能(但从控制台工作)
- 在IE/FireFox/Chrome中横向打印DIV
- 通过javascript的IE/Firefox样式更新不工作
- 在Chrome / Safari下载文件期间$ajax调用挂起,而不是在IE / Firefox中
- 如何在IE, Firefox和Chrome中使用谷歌网页字体