Question

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

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<ctrlli.length; i++){
ctrlli[i].onclick = function(){
for(var j = 0; j<mli.length; j++){mli[j].style.opacity = 0;}
mli[i].style.opacity = 1;
}
}
}

html

<div id="mid">
<div id="content">
<ul>
<li id="start" ><img src="../11.26（2）/img/one.png"/ ></li>
<li class="none"><img src="../11.26（2）/img/two.png"/ ></li>
<li class="none"><img src="../11.26（2）/img/three.png"/ ></li>
<li class="none"><img src="../11.26（2）/img/four.png"/ ></li>
</ul>
</div>
<div id="control">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>

Answer 1

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。

Answer 2

原因：

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

解决方案：

如图添加th

Answer 3

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<ctrlli.length; i++){
        !function(k){
            ctrlli[k].onclick = function(){
                for(var j = 0; j<mli.length; j++)mli[j].style.opacity = 0;
                mli[k].style.opacity = 1;
            }
        }(i)
    }
}
ctrlSlider()

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

可以使用闭包来实现。

追问

我不是规定了 i<ctrlli.length 了吗？为什么i在触发时会是4呢？

追答

i自增到3，满足for循环条件，所以继续循环，当i自增到4，for循环停止。
但是i此时已经是4了。

Answer 4

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

改为

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

追问

上面的兄弟比您快点 都正确的解答了 不好意思啊

追答

没事,随手答的..
不过这种异步回调获取for循环的问题隔一段时间就有新手问...

Answer 5

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