首页 新闻 会员 周边 捐助

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>

智慧头的主页 智慧头 | 菜鸟二级 | 园豆:210
提问于:2013-12-26 22:27
< >
分享
最佳答案
0

html里没有id='div1'的标签吧

奖励园豆:5
鳳梨酥 | 菜鸟二级 |园豆:287 | 2013-12-27 10:26

<!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>

智慧头 | 园豆:210 (菜鸟二级) | 2013-12-27 21:12
其他回答(6)
0

不应该是onload吧,试试load

angelshelter | 园豆:9907 (大侠五级) | 2013-12-26 22:49

window.onload是基本调用后执行;load是加载/

支持(0) 反对(0) 智慧头 | 园豆:210 (菜鸟二级) | 2013-12-26 23:04

@智慧头: 

<!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) 反对(0) 智慧头 | 园豆:210 (菜鸟二级) | 2013-12-27 21:13
1

晕,这都行,class="div1",还有calss="active"

ThreeTree | 园豆:1490 (小虾三级) | 2013-12-26 22:52

class="div1"只是类得名字,active也是自定义名字;不影响。

支持(0) 反对(0) 智慧头 | 园豆:210 (菜鸟二级) | 2013-12-26 23:05

@智慧头: calss?这都好意思写错

支持(0) 反对(0) 飞鸟_Asuka | 园豆:393 (菜鸟二级) | 2013-12-27 09:11

@智慧头:唉,我说是id="div1",就正确了,如果不是id,var a1=document.getElementById("div1");这句返回结果就是null,所以就报js错误了,至于class写成calss,也是粗心了

支持(0) 反对(0) ThreeTree | 园豆:1490 (小虾三级) | 2013-12-27 09:15

@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>

支持(0) 反对(0) 智慧头 | 园豆:210 (菜鸟二级) | 2013-12-27 21:13

<!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) 反对(0) 智慧头 | 园豆:210 (菜鸟二级) | 2013-12-27 21:13
0

学js,出现这些问题的时候,调试一下就行了,还是要善用开发人员工具

德鑫 | 园豆:218 (菜鸟二级) | 2013-12-27 10:38

<!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) 反对(0) 智慧头 | 园豆:210 (菜鸟二级) | 2013-12-27 21:12
0

细节问题,要细心呀,有时候bug都是自己制造的。

aehyok | 园豆:1212 (小虾三级) | 2013-12-27 10:40

<!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) 反对(0) 智慧头 | 园豆:210 (菜鸟二级) | 2013-12-27 21:13
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  你再试试

wolfy | 园豆:2636 (老鸟四级) | 2013-12-27 13:18

<!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) 反对(0) 智慧头 | 园豆:210 (菜鸟二级) | 2013-12-27 21:12
0

这句话有错误,var a1=document.getElementById("div1");,这句话的意思是找到id为div1的标签,但代码里面根本就没有ID为div1的标签,所以JS会报错,建议用Jquery获取:var a1=$(".div1").val();

mczxmin | 园豆:196 (初学一级) | 2013-12-27 14:58

<!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) 反对(0) 智慧头 | 园豆:210 (菜鸟二级) | 2013-12-27 21:13
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册