这个错误是为什么啊？

Question

目的是想让二级菜单下的图片做一个margin-left的缩入

<ul class="navLevel1" id="Level1" style="width:125px;">
        <li class="toggle" id="toGgle"><img src="images/classfy_03.jpg"/ id="Dir"></li>
        <li class="project-manager highLevel"><img src="images/project_06.jpg"/><a href="#">项目管理</a></li>
        <li class="member-manager highLevel"><img src="images/member_06.jpg"/><a href="#">成员管理</a></li>
        <li class="cost-manager beHovered highLevel"><img src="images/money_06.jpg"/><a href="#">费用管理</a></li>
        <li class="data-manager highLevel MenuSlide" id="dateManager">
            <img src="images/data_06.jpg"/><a href="#">数据管理</a>
            <ul class="navLevel2 date-nav active" id="Level2Data" style="height:0;">
                <li class="lowLevel"><img src="images/member_06.jpg" class="vary"/><a href="#">数据采集</a></li>
                <li class="lowLevel"><img src="images/member_06.jpg" class="vary"/><a href="#">数据迁移</a></li>
                <li class="lowLevel"><img src="images/member_06.jpg" class="vary"/><a href="#">数据同步</a></li>
            </ul>    
        </li>
        <li class="task-tool task-nav highLevel MenuSlide" id="taskTool">
            <img src="images/data_06.jpg"/><a href="#">任务工具</a>
            <ul class="navLevel2 active " id="Level2Task"  style="height:0;">
                <li class="lowLevel"><img src="images/member_06.jpg" class="vary"/ class="vary"><a href="#">发布任务</a></li>
                <li class="lowLevel"><img src="images/member_06.jpg" class="vary"/ class="vary"><a href="#">增加任务</a></li>
                <li class="lowLevel"><img src="images/member_06.jpg" class="vary"/><a href="#">删除任务</a></li>
            </ul>
        </li>
        <li class="resource-manager resource-nav highLevel MenuSlide" id="resourceMan">
            <img src="images/data_06.jpg"/><a href="#">资源管理</a>
            <ul class="navLevel2 active " id="Level2Resource" style="height:0;">
                <li class="lowLevel"><img src="images/member_06.jpg" class="vary"/><a href="#">虚拟机</a></li>
                <li class="lowLevel"><img src="images/member_06.jpg" class="vary"/><a href="#">数据库案例</a></li>
                <li class="lowLevel"><img src="images/member_06.jpg" class="vary"/><a href="#">文档及帮助</a></li>
                <li class="lowLevel"><img src="images/member_06.jpg" class="vary"/><a href="#">开放API</a></li>
                <li class="lowLevel"><img src="images/member_06.jpg" class="vary"/><a href="#">云储存</a></li>
            </ul>
        </li>
    </ul>

var rotatGroup = document.getElementById('Level1').getElementsByClassName('vary');
var lan = rotatGroup.length
for (var k=0;k<lan;k++){
    btnaaaaaa.onclick = function(){
        rotatGroup[k].classList.toggle('rotate')
    }
};

script标签页放在body之后的，报错是
Uncaught TypeError: Cannot read property 'classList' of undefined
at HTMLButtonElement.btnaaaaaaa.onclick

btnaaaaaa这个按钮是加上去测试的。。。

Answer 1

闭包问题，你把k打印出来就知道了，你的k始终为lan，rotatGroup[lan]肯定是undefined

for (var k=0;k<lan;k++){
    (function(k){
        btnaaaaaa.onclick = function(){
            rotatGroup[k].classList.toggle('rotate')
        }
    })(k)
};

你的意图可能是：

    btnaaaaaa.onclick = function(){
         for (var k=0;k<lan;k++){
            rotatGroup[k].classList.toggle('rotate');
        }
   }

Answer 2

事件队列，代码在执行的时候，碰到时间函数、触发事件函数、Ajax请求时，会将其放入事件队列中，等到主线程空闲时候，才会去执行事件队列中的代码，就是楼上说的，为按钮绑定事件时候，for循环已经循环完了，K的值已经为lan，所以找不到对象进行绑定事件

Answer 3

试试：

var rotatGroup = document.getElementById('Level1').getElementsByClassName('vary');
var len = rotatGroup.length;
btnaaaaaa.onclick = function(){
    for(var k=0; k<len; k++) {
        rotatGroup[k].classList.toggle('rotate');
    }
}