此代码未运行IE11

时间:2015-12-19 09:57:40

标签: javascript

**此代码未运行IE11给出错误:SCRIPT5007:无法获取属性'样式'未定义或空引用 文件:result.html,行:7,列:1,但是此代码在ie8中顺利运行。我想运行它IE11浏览器。如果代码错误,为什么它在IE8中运行没有任何错误。需要进行哪些必要的更改在代码或IE11浏览器设置中运行此代码?我再次确认这个代码运行顺畅的IE8浏览器,怎么可能? **



<html>
<head><title></title></head>
<body>
<script>
function ff()
{
document.getElementById('error').style.visibility="visible";
var rollno8=new Array('01','02','03','04','05','06','07','08','09','10');
var studentname8=new Array('ARUP DEY','B','C','D','E','F','G','H','I','J');
var fathersname8=new Array('DULAL CH. DEY','B','C','D','E','F','G','H','I','J');
var studentmarks8=new Array('50','60','55','65','70','74','75','52','45','89');
var m=document.getElementById('rollnumber').value;
var errormessage=document.getElementById('showerrormessage');
if(m=="")
{
document.getElementById('showerrormessage').style.visibility="visible";
errormessage.innerHTML="PLEASE PROVIDE YOUR ROLL NUMBER";
}

else
{
for(i=0;i<=9;i++)
{
var student_name=document.getElementById('studentname');
var student_fname=document.getElementById('studentfname');
var student_rollnumber=document.getElementById('studentno');
var student_marks=document.getElementById('studentmarks');
var student_status=document.getElementById('studentstatus');
var a=studentname8[i];
var b=rollno8[i];
var c=fathersname8[i];
var d=studentmarks8[i];
if(m==b)
{
document.getElementById('error').style.visibility="hidden";
document.getElementById('getresult').style.visibility="visible";
student_name.innerHTML=a;
student_rollnumber.innerHTML=b;
student_fname.innerHTML=c;
student_marks.innerHTML=d;
if(d>=50)
{
student_status.innerHTML="PASS";
}
else
{
student_status.innerHTML="FAILED";
}
}

else
{
var ok=1;
}

}

if(ok==1)
{
document.getElementById('showerrormessage').style.visibility="visible";
errormessage.innerHTML="THIS ROLL NUMBER DOES NOT EXIST";
}

}
}


function resetMyResult()
{
document.getElementById('getresult').style.visibility="hidden";
document.getElementById('showerrormessage').style.visibility="hidden";
}
</script>
<form name="result">
<table align="center"style="border-color:black"border="2px"name="showmyresultform">
<tr>
<td style="background-color:#cceecc;font-size:12px;font-weight:bold">ROLL NUMBER</TD>
<TD style="background-color:#cceecc"><INPUT TYPE="TEXT"name="rollnumber"value=""size="20"maxlength="2"></td>
</tr>
<tr>
<td colspan="2" style="background-color:#cceecc"align="center"><input type="button"value="SUBMIT"style="background-color:green"onclick="ff()">
<input type="reset"value="RESET"style="background-color:green"onClick="resetMyResult()"></td>
</tr>
</table>
</form>

<form name="getresult"style="visibility:hidden">
<table style="border-color:black"border="2px"name="showmyresult"align="center">
<tr>
<td style="background-color:green;font-size:12px;font-weight:bold;color:white">STUDENT'S NAME :</td><td><div id="studentname"style="background-color:#cceecc;color:black;font-size:12px;font-weight:bold"align="center"></div></td>
</tr>
<tr>
<td style="background-color:green;font-size:12px;font-weight:bold;color:white">FATHER'S NAME :</td><td><div id="studentfname"style="background-color:#cceecc;color:black;font-size:12px;font-weight:bold"align="center"></div></td>
</tr>
<tr>
<td style="background-color:green;font-size:12px;font-weight:bold;color:white">ROLL NO. :</td><td><div id="studentno"style="background-color:#cceecc;color:black;font-size:12px;font-weight:bold"align="center"></div></td>
</tr>
<tr>
<td style="background-color:green;font-size:12px;font-weight:bold;color:white">MARKS OBTAINED :</td><td><div id="studentmarks"style="background-color:#cceecc;color:black;font-size:12px;font-weight:bold"align="center"></div></td>
</tr>
<tr>
<td style="background-color:green;font-size:12px;font-weight:bold;color:white">STATUS :</td><td><div id="studentstatus"style="background-color:#cceecc;color:black;font-size:12px;font-weight:bold"align="center"></div></td>
</tr>
<tr>
<td colspan="2"align="center"><div id="showprint"><input type="button"value="PRINT"onClick="print()"style="background-color:#ccffff;font-size:12px;font-weight:bold;color:black"></div>
</table>
</form>
<form name="error">
<table  align="center">
<tr>
<td>
<div id="showerrormessage"style="background-color:;font-size:14px;font-weight:bold;color:RED" align="center"value=""></div>
</td>
</tr>
</table>
</form>
</body>
</html>​
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:1)

一些问题..

a)您正在呼叫:document.getElementById('error')但您确实没有任何ID等于error的元素。您在DOM中拥有的是:<form name="error">

将代码更改为:document.getElementsByName('error')[0].style.visibility="visible";

b)document.getElementById('rollnumber').value相同的事情。将<INPUT TYPE="TEXT"name="rollnumber"value=""size="20"maxlength="2">更改为<INPUT TYPE="TEXT" id="rollnumber" value="" size="20" maxlength="2">

c)请遵循HTML5关于按空格分隔HTML属性的标准:

  

..必须有一个空格字符分隔两个

http://www.w3.org/TR/html5/syntax.html#start-tags

完整的代码在这里:

<html>
<head><title></title></head>
<body>
<script>
function ff()
{
document.getElementsByName('error')[0].style.visibility="visible";
var rollno8=new Array('01','02','03','04','05','06','07','08','09','10');
var studentname8=new Array('ARUP DEY','B','C','D','E','F','G','H','I','J');
var fathersname8=new Array('DULAL CH. DEY','B','C','D','E','F','G','H','I','J');
var studentmarks8=new Array('50','60','55','65','70','74','75','52','45','89');
var m=document.getElementById('rollnumber').value;
var errormessage=document.getElementById('showerrormessage');
if(m=="")
{
document.getElementById('showerrormessage').style.visibility="visible";
errormessage.innerHTML="PLEASE PROVIDE YOUR ROLL NUMBER";
}

else
{
for(i=0;i<=9;i++)
{
var student_name=document.getElementById('studentname');
var student_fname=document.getElementById('studentfname');
var student_rollnumber=document.getElementById('studentno');
var student_marks=document.getElementById('studentmarks');
var student_status=document.getElementById('studentstatus');
var a=studentname8[i];
var b=rollno8[i];
var c=fathersname8[i];
var d=studentmarks8[i];
if(m==b)
{
document.getElementById('error').style.visibility="hidden";
document.getElementById('getresult').style.visibility="visible";
student_name.innerHTML=a;
student_rollnumber.innerHTML=b;
student_fname.innerHTML=c;
student_marks.innerHTML=d;
if(d>=50)
{
student_status.innerHTML="PASS";
}
else
{
student_status.innerHTML="FAILED";
}
}

else
{
var ok=1;
}

}

if(ok==1)
{
document.getElementById('showerrormessage').style.visibility="visible";
errormessage.innerHTML="THIS ROLL NUMBER DOES NOT EXIST";
}

}
}


function resetMyResult()
{
document.getElementById('getresult').style.visibility="hidden";
document.getElementById('showerrormessage').style.visibility="hidden";
}
</script>
<form name="result">
<table align="center" style="border-color:black" border="2px" name="showmyresultform">
<tr>
<td style="background-color:#cceecc;font-size:12px;font-weight:bold">ROLL NUMBER</TD>
<TD style="background-color:#cceecc"><INPUT TYPE="TEXT" id="rollnumber" value="" size="20" maxlength="2"></td>
</tr>
<tr>
<td colspan="2" style="background-color:#cceecc" align="center"><input type="button" value="SUBMIT" style="background-color:green" onclick="ff()">
<input type="reset" value="RESET" style="background-color:green" onClick="resetMyResult()"></td>
</tr>
</table>
</form>

<form name=" getresult" style="visibility:hidden">
<table style="border-color:black" border="2px" name="showmyresult" align="center">
<tr>
<td style="background-color:green;font-size:12px;font-weight:bold;color:white">STUDENT'S NAME :</td><td><div id="studentname" style="background-color:#cceecc;color:black;font-size:12px;font-weight:bold" align="center"></div></td>
</tr>
<tr>
<td style="background-color:green;font-size:12px;font-weight:bold;color:white">FATHER'S NAME :</td><td><div id="studentfname" style="background-color:#cceecc;color:black;font-size:12px;font-weight:bold" align="center"></div></td>
</tr>
<tr>
<td style="background-color:green;font-size:12px;font-weight:bold;color:white">ROLL NO. :</td><td><div id="studentno" style="background-color:#cceecc;color:black;font-size:12px;font-weight:bold" align="center"></div></td>
</tr>
<tr>
<td style="background-color:green;font-size:12px;font-weight:bold;color:white">MARKS OBTAINED :</td><td><div id="studentmarks" style="background-color:#cceecc;color:black;font-size:12px;font-weight:bold" align="center"></div></td>
</tr>
<tr>
<td style="background-color:green;font-size:12px;font-weight:bold;color:white">STATUS :</td><td><div id="studentstatus" style="background-color:#cceecc;color:black;font-size:12px;font-weight:bold" align="center"></div></td>
</tr>
<tr>
<td colspan="2" align="center"><div id="showprint"><input type="button" value="PRINT" onClick="print()" style="background-color:#ccffff;font-size:12px;font-weight:bold;color:black"></div>
</table>
</form>
<form name="error">
<table  align="center">
<tr>
<td>
<div id="showerrormessage" style="background-color:;font-size:14px;font-weight:bold;color:RED" align="center" value=""></div>
</td>
</tr>
</table>
</form>
</body>
</html>

答案 1 :(得分:0)

如果你想通过id访问元素,例如document.getElementById('error') 请设置html元素的id。

<form id="error">

您可能需要将此修补程序应用于html中的许多位置,因为您要为HTML元素指定名称,但使用getElementById访问元素