救命，大家看下我这个js var的作用域问题

下面代码每次点击小框应该显示1-20编号
但是老显示21这一个数字
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style media="screen">
#containner
{
background-color:#FC0;
width:200px;
height:200px;
position:relative;


}
</style>
<script language="javascript">
function liyong()
{

document.getElementById("containner").innerHTML="";
var i=1
    for (i=1;i<=20;i++)
{

var litdiv = document.createElement("div");
litdiv.style.backgroundColor="#0C9";
litdiv.style.borderColor="#FC0";
litdiv.style.width="20px";
litdiv.style.height="20px";
litdiv.style.position="absolute"; litdiv.style.top=Math.random()*180+"px";
litdiv.style.left=Math.random()*180+"px";
litdiv.onclick=function(){
window.alert("这个小框的编号是："+i);
}
document.getElementById("containner").appendChild(litdiv);

}
}
</script>
</head><body>
<div id="containner">200X200的容器框！</div>
<input name="" type="button"  value="点击按钮生成小框" onclick="javascript:liyong()"/>
</body>
</html>

解决方案 »

  1.   

    document.getElementById("containner").appendChild(litdiv);
    for 里面
      

  2.   


    litdiv.onclick=(function(num){
    return function (){
    window.alert("这个小框的编号是："+num);
    }
    })(i);
      

  3.   

    function liyong(){
    document.getElementById("containner").innerHTML="";

    var i=1
    for (i=1;i<=20;i++){
    var litdiv = document.createElement("div");
    litdiv.style.backgroundColor="#0C9";
    litdiv.style.borderColor="#FC0";
    litdiv.style.width="20px";
    litdiv.style.height="20px";
    litdiv.style.position="absolute"; litdiv.id=i;

    litdiv.style.top=Math.random()*180+"px";
    litdiv.style.left=Math.random()*180+"px"; document.getElementById("containner").appendChild(litdiv); document.getElementById(i).onclick=function(){
    window.alert("这个小框的编号是："+this.id);
    }
    }
    }
      

  4.   

    不用闭包也行 把数据存到对象里 用楼上的
    或者
    litdiv.setAttribute('num',i);
    litdiv.onclick=function (){
    alert(this.getAttribute('num'));
    };
      

  5.   

      for (i=1;i<=20;i++)
    {var litdiv = document.createElement("div");
    litdiv.style.backgroundColor="#0C9";
    litdiv.style.borderColor="#FC0";
    litdiv.style.width="20px";
    litdiv.style.height="20px";
    litdiv.style.position="absolute";litdiv.style.top=Math.random()*180+"px";
    litdiv.style.left=Math.random()*180+"px";
    var a = i;//这么改写
    litdiv.onclick=function(){
    window.alert("这个小框的编号是："+a);
    }就是作用域的问题.改写下就好了.
      

  6.   

    在生成小div控件的时候，div的click事件同时绑定上去了，此时并不执行，当循环20次后i已经变为21，
    当点击小div的时候，调用alert（i），此时的i必然是21，不可能会再循环。
      

  7.   

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style media="screen">
    #containner
    {
    background-color:#FC0;
    width:200px;
    height:200px;
    position:relative;
    }
    </style>
    <script language="javascript">
    function liyong()
    {document.getElementById("containner").innerHTML="";
    var i=1
      for (i=1;i<=20;i++)
    {var litdiv = document.createElement("div");
    litdiv.style.backgroundColor="#0C9";
    litdiv.style.borderColor="#FC0";
    litdiv.style.width="20px";
    litdiv.style.height="20px";
    litdiv.style.position="absolute";litdiv.style.top=Math.random()*180+"px";
    litdiv.style.left=Math.random()*180+"px";
    litdiv.onclick=function(i){
    return function(){
    window.alert("这个小框的编号是："+i);
    }
    }(i)
    document.getElementById("containner").appendChild(litdiv);}
    }
    </script>
    </head><body>
    <div id="containner">200X200的容器框！</div>
    <input name="" type="button" value="点击按钮生成小框" onclick="javascript:liyong()"/>
    </body>
    </html>
      

  8.   

    这是我第4次看到for循环里给与元素加事件的例子了~~~
    看来闭包的问题对大家都是敏感的啊
    LZ  楼上“大嘴哥”的那个答案OK
      

  9.   

    由于onclick事件引用到的外部函数的i的值，一个内部函数引用到外边函数的变量，造成外部函数执行完没有释放内存，这就是传说中的闭包，因为for循环的时候不会立即执行onclick事件。而等到外部循环结束时再加载。这时i的值已经是21了。