js为什么会报错Uncaught TypeError: Cannot read property ✀style✀ of undefined

ctrlSlider函数里面定义的变量i是var命令声明的，在该函数内都有效，所以函数内只有一个变量i。每一次循环，变量i的值都会发生改变，而循环内被赋给ctrlli[i]的参数i，里面的i指向的就是全局的i。也就是说，每一次for循环里面的i，指向的都是同一个i。可以尝试在ctrlli[i].onclick = function(){这行下面输出i值:console.log(i)，打印的都是4。如果使用let，声明的变量仅在块级作用域内有效，依次点击下面的列表会分别输出0,1,2,3。

原因：

在columns里加入了id，并设置visible：false ，却未在HTML多加一个th 。
它们必须数目一样。

解决方案：

如图添加th

function ctrlSlider(){
    var ctrl = document.getElementById("control");
    var ctrlli = ctrl.getElementsByTagName("li");
    var mdiv = document.getElementById("content");
    var mli = mdiv.getElementsByTagName("li");
    for (var i=0; i        !function(k){
            ctrlli[k].onclick = function(){
                for(var j = 0; j                mli[k].style.opacity = 1;
            }
        }(i)
    }
}
ctrlSlider()

i在事件触发的时候已经是4了，mli[i]就成了undefined，undefined当然就没有style属性。

可以使用闭包来实现。

 for (var i=0; i   ctrlli[i].onclick = function(){
       for(var j = 0; j           mli[j].style.opacity = 0;
       } 
       mli[i].style.opacity = 1;//这个执行的时候i==ctrlli.length
       }
   }

改为

for (var m=0; m    (function(i){
        ctrlli[i].onclick = function(){
           for(var j = 0; j               mli[j].style.opacity = 0;
           } 
           mli[i].style.opacity = 1;//这个执行的时候i==m
           }
    })(m)
}

没选择到元素,应该吧var mdiv = document.getElementById("content");
var mli = mdiv.getElementsByTagName("li");写到onclick方法里面。