这样写为什么实现不了效果，只用一次循环

Question

 var li=document.getElementsByTagName("li")  var div=document.getElementsByTagName("div")  for(var i=0;i<li.length;i++){      li[i].onclick=function(){          li[i].className=""          this.className="on"      }  }

Answer 1

函数闭包问题，你的循环里面，每一个i的值都是li.length,所以这个元素不存在。

先做个试验：把里面两句注释掉，然后直接打印i的值，在控制台看一下输出：

 for(var i=0;i<li.length;i++){
      li[i].onclick=function(){
          //li[i].className=""
          //this.className="on"
          console.log(i);
      }
  }

你会发现，你点击任何一个元素，输出的结果都是一样的。都是li的长度。

这些绑定事件都是点击的时候才调用的，但加载的时候，i的值已经变化了，由于JavaScript闭包的存在，这个i一直存在于内存中；

var li = document.getElementsByTagName('li');    
for (var i = 0; i < li.length; i++) {    
   (function(i){    
        li[i].onclick = function() {        
            console.log(i);      
        }  
   })(i);  
}

Answer 2

你要实现什么效果。。？