初学JS，帮忙看一下为什么循环体不能执行
其他位子没有问题了，就是出在循环体的循环条件上，当隐藏掉循环体的循环条件后，将i用常数带掉就可以执行了<!DOCTYPEhtml><html><head><title>无...
其他位子没有问题了，就是出在循环体的循环条件上，当隐藏掉循环体的循环条件后，将i用常数带掉就可以执行了
<!DOCTYPE html>
<html>
<head>
<title>无标题文档</title>
<style>
#div1 {height:100px;width:80px;position:absolute;background-color:#ff00ff;left:333px;top:50px}
#div2 {height:300px;width:1px;position:absolute;background-color:#000000;left:200px;top:0px}
#div3 {height:300px;width:1px;position:absolute;background-color:#000000;left:500px;top:0px}
</style>
<script>
window.onload=function()
{
var oDiv=document.getElementById('div1');
var aBtn=document.getElementsByTagName('input');
//for(var i=0;i<2;i++)
{
aBtn[i].onclick=function()
{
starMove(aBtn[i].value);
}
}
}
var timer=null;
var speed=0;
function starMove(aim)
{
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function(){
if(aim>oDiv.offsetLeft)
{
speed=9;
}
else
{
speed=-9;
}
if(Math.abs(oDiv.offsetLeft-aim)<=9)
{
clearInterval(timer);
oDiv.style.left=aim+'px';
}
else
{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},30)
}
</script>
</head>
<body>
<input type="button" value="200"/>
<input type="button" value="500"/>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html> 展开
<!DOCTYPE html>
<html>
<head>
<title>无标题文档</title>
<style>
#div1 {height:100px;width:80px;position:absolute;background-color:#ff00ff;left:333px;top:50px}
#div2 {height:300px;width:1px;position:absolute;background-color:#000000;left:200px;top:0px}
#div3 {height:300px;width:1px;position:absolute;background-color:#000000;left:500px;top:0px}
</style>
<script>
window.onload=function()
{
var oDiv=document.getElementById('div1');
var aBtn=document.getElementsByTagName('input');
//for(var i=0;i<2;i++)
{
aBtn[i].onclick=function()
{
starMove(aBtn[i].value);
}
}
}
var timer=null;
var speed=0;
function starMove(aim)
{
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function(){
if(aim>oDiv.offsetLeft)
{
speed=9;
}
else
{
speed=-9;
}
if(Math.abs(oDiv.offsetLeft-aim)<=9)
{
clearInterval(timer);
oDiv.style.left=aim+'px';
}
else
{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},30)
}
</script>
</head>
<body>
<input type="button" value="200"/>
<input type="button" value="500"/>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html> 展开
4个回答
展开全部
循环没有问题，你想动态绑定onclick方法，但是当你执行完循环的时候i已经等2了，但是事件还没触发，当你点击的时候，事件触发。此时i的值为2。所以starMove(aBtn[i].value);数组越界了，没有aBtn[2]这个元素。所以aBtn[2].value不存在还去取值就报错。造成for循环失败。你把这句改成alert();会弹出2次，
其实你想做到的效果是小紫块走动，这样写就好了
<!DOCTYPE html>
<html>
<head>
<title>无标题文档</title>
<style>
#div1 {height:100px;width:80px;position:absolute;background-color:#ff00ff;left:333px;top:50px}
#div2 {height:300px;width:1px;position:absolute;background-color:#000000;left:200px;top:0px}
#div3 {height:300px;width:1px;position:absolute;background-color:#000000;left:500px;top:0px}
</style>
<script>
var oDiv=document.getElementById('div1');
var aBtn=document.getElementsByTagName('input');
window.onload=function()
{
aBtn[0].onclick=function()
{
starMove(aBtn[0].value);
}
aBtn[1].onclick=function()
{
starMove(aBtn[1].value);
}
}
var timer=null;
var speed=0;
function starMove(aim)
{
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function(){
if(aim>oDiv.offsetLeft)
{
speed=9;
}
else
{
speed=-9;
}
if(Math.abs(oDiv.offsetLeft-aim)<=9)
{
clearInterval(timer);
oDiv.style.left=aim+'px';
}
else
{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},30)
}
</script>
</head>
<body>
<input type="button" value="200"/>
<input type="button" value="500"/>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
循环语句好像被你自己注释掉了
//for(var i=0;i<2;i++)
//for(var i=0;i<2;i++)
追问
注释符是故意写着提问的，就是因为问题出在这里，去掉注释符后程序无反应；将此句加上注释符后，将循环体的i用常数代替后，整个程序顺利运行，求解
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
for(var i=0;i<2;i++)
{
var item = aBtn[i];
item.onclick=function()
{
starMove(item.value);
}
}
追问
按你的修改后为什么两个按钮效果相同了，明明value是不同的啊
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
aBtn[i].onclick=function()
{
starMove(this.value);
}
{
starMove(this.value);
}
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
