js代码不能正常执行的问题
-1
[已解决问题]
解决于 2013-12-27 23:37
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.div1 div{ background-color:#9F0; display:none; border:#009 1px solid;height:50px;width:200px;}
</style>
</head>
<script type="text/javascript">
window.onload=function(){
var a1=document.getElementById("div1");
var a2=a1.getElementsByTagName("input");/*
var a3=document.getElementsByTagName("div");
for(var i=0;i<a2.length;i++){
a2[i].onclick=function(){
alert(this.value);
}
}*/
alert("aaa");
}
</script>
<body>
<div class="div1">
<input calss="active"type="button" value="DD" />
<input type="button" value="CC" />
<input type="button" value="BB" />
<input type="button" value="AA" />
<div style="display:block"></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
最佳答案
0
html里没有id='div1'的标签吧
奖励园豆：5
<!DOCTYPE html>
<head>
<meta content="text/html; charset=utf-8" />
<title>js选项卡</title>
<style>
#div1 div{ background-color:#9F0; display:none; border:#009 1px solid;height:80px;width:200px;}
.active{background:yellow;}
</style>
</head>
<script type="text/javascript">
window.onload=function(){
var a1=document.getElementById("div1");
var a2=a1.getElementsByTagName("input");
var a3=a1.getElementsByTagName("div");
for(var i=0;i<a2.length;i++){
a2[i].index=i;//给input元素命序列
a2[i].onclick=function()
{
for(var i=0;i<a2.length;i++)
{
a2[i].className="";//令class属性为空
a3[i].style.display="none";//清除display为block的属性；
}
this.className="active";//当前属性为加了按钮的；
a3[this.index].style.display="block";//令当前的属性为block
}
}
}
</script>
<body>
<div id="div1">
<input class="active" type="button" value="AA" />
<input type="button" value="BB" />
<input type="button" value="CC" />
<input type="button" value="DD" />
<div style="display:block">000</div>
<div>111</div>
<div>222</div>
<div>333</div>
</div>
</body>
</html>
其他回答(6)
0
不应该是onload吧，试试load
window.onload是基本调用后执行；load是加载/
@智慧头:
<!DOCTYPE html>
<head>
<meta content="text/html; charset=utf-8" />
<title>js选项卡</title>
<style>
#div1 div{ background-color:#9F0; display:none; border:#009 1px solid;height:80px;width:200px;}
.active{background:yellow;}
</style>
</head>
<script type="text/javascript">
window.onload=function(){
var a1=document.getElementById("div1");
var a2=a1.getElementsByTagName("input");
var a3=a1.getElementsByTagName("div");
for(var i=0;i<a2.length;i++){
a2[i].index=i;//给input元素命序列
a2[i].onclick=function()
{
for(var i=0;i<a2.length;i++)
{
a2[i].className="";//令class属性为空
a3[i].style.display="none";//清除display为block的属性；
}
this.className="active";//当前属性为加了按钮的；
a3[this.index].style.display="block";//令当前的属性为block
}
}
}
</script>
<body>
<div id="div1">
<input class="active" type="button" value="AA" />
<input type="button" value="BB" />
<input type="button" value="CC" />
<input type="button" value="DD" />
<div style="display:block">000</div>
<div>111</div>
<div>222</div>
<div>333</div>
</div>
</body>
</html>
1
晕，这都行，class="div1"，还有calss="active"
class="div1"只是类得名字，active也是自定义名字；不影响。
@智慧头: calss？这都好意思写错
@智慧头:唉，我说是id="div1"，就正确了，如果不是id，var a1=document.getElementById("div1");这句返回结果就是null，所以就报js错误了，至于class写成calss，也是粗心了
@ThreeTree:
<!DOCTYPE html>
<head>
<meta content="text/html; charset=utf-8" />
<title>js选项卡</title>
<style>
#div1 div{ background-color:#9F0; display:none; border:#009 1px solid;height:80px;width:200px;}
.active{background:yellow;}
</style>
</head>
<script type="text/javascript">
window.onload=function(){
var a1=document.getElementById("div1");
var a2=a1.getElementsByTagName("input");
var a3=a1.getElementsByTagName("div");
for(var i=0;i<a2.length;i++){
a2[i].index=i;//给input元素命序列
a2[i].onclick=function()
{
for(var i=0;i<a2.length;i++)
{
a2[i].className="";//令class属性为空
a3[i].style.display="none";//清除display为block的属性；
}
this.className="active";//当前属性为加了按钮的；
a3[this.index].style.display="block";//令当前的属性为block
}
}
}
</script>
<body>
<div id="div1">
<input class="active" type="button" value="AA" />
<input type="button" value="BB" />
<input type="button" value="CC" />
<input type="button" value="DD" />
<div style="display:block">000</div>
<div>111</div>
<div>222</div>
<div>333</div>
</div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta content="text/html; charset=utf-8" />
<title>js选项卡</title>
<style>
#div1 div{ background-color:#9F0; display:none; border:#009 1px solid;height:80px;width:200px;}
.active{background:yellow;}
</style>
</head>
<script type="text/javascript">
window.onload=function(){
var a1=document.getElementById("div1");
var a2=a1.getElementsByTagName("input");
var a3=a1.getElementsByTagName("div");
for(var i=0;i<a2.length;i++){
a2[i].index=i;//给input元素命序列
a2[i].onclick=function()
{
for(var i=0;i<a2.length;i++)
{
a2[i].className="";//令class属性为空
a3[i].style.display="none";//清除display为block的属性；
}
this.className="active";//当前属性为加了按钮的；
a3[this.index].style.display="block";//令当前的属性为block
}
}
}
</script>
<body>
<div id="div1">
<input class="active" type="button" value="AA" />
<input type="button" value="BB" />
<input type="button" value="CC" />
<input type="button" value="DD" />
<div style="display:block">000</div>
<div>111</div>
<div>222</div>
<div>333</div>
</div>
</body>
</html>
0
学js，出现这些问题的时候，调试一下就行了，还是要善用开发人员工具
<!DOCTYPE html>
<head>
<meta content="text/html; charset=utf-8" />
<title>js选项卡</title>
<style>
#div1 div{ background-color:#9F0; display:none; border:#009 1px solid;height:80px;width:200px;}
.active{background:yellow;}
</style>
</head>
<script type="text/javascript">
window.onload=function(){
var a1=document.getElementById("div1");
var a2=a1.getElementsByTagName("input");
var a3=a1.getElementsByTagName("div");
for(var i=0;i<a2.length;i++){
a2[i].index=i;//给input元素命序列
a2[i].onclick=function()
{
for(var i=0;i<a2.length;i++)
{
a2[i].className="";//令class属性为空
a3[i].style.display="none";//清除display为block的属性；
}
this.className="active";//当前属性为加了按钮的；
a3[this.index].style.display="block";//令当前的属性为block
}
}
}
</script>
<body>
<div id="div1">
<input class="active" type="button" value="AA" />
<input type="button" value="BB" />
<input type="button" value="CC" />
<input type="button" value="DD" />
<div style="display:block">000</div>
<div>111</div>
<div>222</div>
<div>333</div>
</div>
</body>
</html>
0
细节问题，要细心呀，有时候bug都是自己制造的。
<!DOCTYPE html>
<head>
<meta content="text/html; charset=utf-8" />
<title>js选项卡</title>
<style>
#div1 div{ background-color:#9F0; display:none; border:#009 1px solid;height:80px;width:200px;}
.active{background:yellow;}
</style>
</head>
<script type="text/javascript">
window.onload=function(){
var a1=document.getElementById("div1");
var a2=a1.getElementsByTagName("input");
var a3=a1.getElementsByTagName("div");
for(var i=0;i<a2.length;i++){
a2[i].index=i;//给input元素命序列
a2[i].onclick=function()
{
for(var i=0;i<a2.length;i++)
{
a2[i].className="";//令class属性为空
a3[i].style.display="none";//清除display为block的属性；
}
this.className="active";//当前属性为加了按钮的；
a3[this.index].style.display="block";//令当前的属性为block
}
}
}
</script>
<body>
<div id="div1">
<input class="active" type="button" value="AA" />
<input type="button" value="BB" />
<input type="button" value="CC" />
<input type="button" value="DD" />
<div style="display:block">000</div>
<div>111</div>
<div>222</div>
<div>333</div>
</div>
</body>
</html>
0
<script type="text/javascript">
window.onload=function(){
var a1=document.getElementById("div1");
var a2=a1.getElementsByTagName("input");
var a3=document.getElementsByTagName("div");
for(var i=0;i<a2.length;i++){
a2[i].onclick=function(){
alert(this.value);
}
}
alert("aaa");
}
}这地方少了一个" }"
</script>
最好 将这个代码放在head标签内 还有请给一个div id=“div1” 还有请 <input calss="active"type="button" value="DD" /> 内的calss 改为class 你再试试
<!DOCTYPE html>
<head>
<meta content="text/html; charset=utf-8" />
<title>js选项卡</title>
<style>
#div1 div{ background-color:#9F0; display:none; border:#009 1px solid;height:80px;width:200px;}
.active{background:yellow;}
</style>
</head>
<script type="text/javascript">
window.onload=function(){
var a1=document.getElementById("div1");
var a2=a1.getElementsByTagName("input");
var a3=a1.getElementsByTagName("div");
for(var i=0;i<a2.length;i++){
a2[i].index=i;//给input元素命序列
a2[i].onclick=function()
{
for(var i=0;i<a2.length;i++)
{
a2[i].className="";//令class属性为空
a3[i].style.display="none";//清除display为block的属性；
}
this.className="active";//当前属性为加了按钮的；
a3[this.index].style.display="block";//令当前的属性为block
}
}
}
</script>
<body>
<div id="div1">
<input class="active" type="button" value="AA" />
<input type="button" value="BB" />
<input type="button" value="CC" />
<input type="button" value="DD" />
<div style="display:block">000</div>
<div>111</div>
<div>222</div>
<div>333</div>
</div>
</body>
</html>
0
这句话有错误，var a1=document.getElementById("div1");，这句话的意思是找到id为div1的标签，但代码里面根本就没有ID为div1的标签，所以JS会报错，建议用Jquery获取：var a1=$(".div1").val();
<!DOCTYPE html>
<head>
<meta content="text/html; charset=utf-8" />
<title>js选项卡</title>
<style>
#div1 div{ background-color:#9F0; display:none; border:#009 1px solid;height:80px;width:200px;}
.active{background:yellow;}
</style>
</head>
<script type="text/javascript">
window.onload=function(){
var a1=document.getElementById("div1");
var a2=a1.getElementsByTagName("input");
var a3=a1.getElementsByTagName("div");
for(var i=0;i<a2.length;i++){
a2[i].index=i;//给input元素命序列
a2[i].onclick=function()
{
for(var i=0;i<a2.length;i++)
{
a2[i].className="";//令class属性为空
a3[i].style.display="none";//清除display为block的属性；
}
this.className="active";//当前属性为加了按钮的；
a3[this.index].style.display="block";//令当前的属性为block
}
}
}
</script>
<body>
<div id="div1">
<input class="active" type="button" value="AA" />
<input type="button" value="BB" />
<input type="button" value="CC" />
<input type="button" value="DD" />
<div style="display:block">000</div>
<div>111</div>
<div>222</div>
<div>333</div>
</div>
</body>
</html>
