这个JavaScript我就是想不通，我明明有定义，为什么老报错没有定义！
<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><style...
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">#div1,#div2,#div3{width:200px;height:200px;background:red;margin:10px;}</style></head><body><div id="div1"></div><div id="div2"></div><div id="div3"></div><script type="text/javascript"> var timer=null; oDiv=document.getElementsByTagName("div");function test(i){timer=setInterval(function(){oDiv[i].style.height=oDiv[i].offsetHeight+2+'px'},30)};for(var i=0;i<3;i++){oDiv[i].onmouseover=function(){test(i);}oDiv[i].onmouseout=function(){clearInterval(timer);}}</script></body></html>
展开
展开全部
问题出在这里：
oDiv[i].onmouseover=function(){
test(i);
}这里面的两个i其实是大有区别的哦，由于test(i)是在鼠标over事件触发后才执行，并不是在for循环中立即执行的，所以这个i的值并不是你想象中的0、1、2，而是3（也就是for循环结束后的i值），由于3已经超出oDiv的索引范围，所以就是undefined咯！
可以这样修改：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#div1,#div2,#div3{width:200px;height:200px;background:red;margin:10px;}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<script type="text/javascript">
var timer=null;
oDiv=document.getElementsByTagName("div");
function test(obj){
timer=setInterval(function(){obj.style.height=obj.offsetHeight+2+'px'},30)
};
for(var i=0;i<3;i++){
oDiv[i].onmouseover=function(){
test(this);
}
oDiv[i].onmouseout=function(){
clearInterval(timer);
}
}
</script>
</body>
</html>
追问
貌似懂了点，你的意思是：for（）循环的时候，0,1,2分别赋给了 oDiv[1],oDiv[2],oDiv[3];但他并没有直接赋值给test（1）test（2） test（3），因为后面的函数，只有在oDiv(i)被触及的时候才会执行test（i）；但是当我打开运行的时候，for（）早就循环了一遍，使得 i=3，这个时候i=3就赋给了每一个test（i），然而并没有3，所以报错！。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
因为你掉到了名为闭包的坑裏
简单的加个IIFE就好
var timer = null;
oDiv = document.getElementsByTagName("div");
function test(i) {
timer = setInterval(function() {
oDiv[i].style.height = oDiv[i].offsetHeight + 2 + 'px'
}, 30)
};
for (var i = 0; i < 3; i++) ~function(i)
{
oDiv[i].onmouseover = function() {
test(i);
}
oDiv[i].onmouseout = function() {
clearInterval(timer);
}
}(i)
追问
闭包的坑裏 这是个什么东西啊？
~function（i）是什么写法？
我从来没见过这种写法，还有其他的方法吗？上面明明有声明啊，不是吗？
追答
~function(i){}()
就是IIFE(立即执行函数)
你的调试工具坑了你
正确的报错是TypeError: Cannot read property 'style' of undefined
意思是oDiv[i]是undefined, 而不是oDiv没定义
IIFE的主要目的是保存循环变量i
如果不这麽写, 你可以在test中把i输出出来看看是不是3, 而不是你想要的0,1,2
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
