Javascript 未捕获类型错误：无法读取属性'；类列表'；未定义|但在I console.log时指向元素_Javascript

Javascript 未捕获类型错误：无法读取属性'；类列表'；未定义|但在I console.log时指向元素

javascript

Javascript 未捕获类型错误：无法读取属性'；类列表'；未定义|但在I console.log时指向元素,javascript,Javascript,当I console.log img_li[I]指向正确的元素时，当我尝试检查元素中是否存在“d_on”类时，出现了上述错误。相同的代码适用于右按钮（第一个事件）。但不适用于左侧事件。错误发生在这一行var d_check=elem.classList.contains（“d_on”） var ul=document.querySelector（“.images”）； var img_li=document.queryselectoral（“.img_li”）； var指针

当I console.log img_li[I]指向正确的元素时，当我尝试检查元素中是否存在“d_on”类时，出现了上述错误。相同的代码适用于右按钮（第一个事件）。但不适用于左侧事件。错误发生在这一行var d_check=elem.classList.contains（“d_on”）












var ul=document.querySelector（“.images”）；
var img_li=document.queryselectoral（“.img_li”）；
var指针=document.querySelector（“.d_on”）；
var left=document.querySelector（“.left”）；
var right=document.querySelector（“.right”）；
//右键
右。addEventListener（“单击”，函数（）{
对于（i=0；i=0；i--）{
console.log（img_li[i]）；//正在工作
var elem=img_li[i]；
var d_check=elem.classList.contains（“d_on”）；
var elemNext=elem.nextElementSibling；
var elemPrev=elem.previouselement同级；
}//循环结束
});//活动结束

所以您的代码有一些错误

您不应该将click侦听器附加到每个

元素（这在性能方面非常昂贵）。将侦听器添加到

将完成这项工作，因为js机制称为事件冒泡。检查

当不再需要事件侦听器时，您应该删除它们（removeEventListener）

在第一个for循环（右按钮）中，您正在创建全局变量

，并将

指定为其值。然后在第二个循环（左键）中覆盖变量值。您不应该使用全局变量。最简单的修复方法是使用let关键字

let i=0

和

i=img_li.length

创建块作用域变量“i”，以了解有关常见错误做法查找的更多信息

<body>
    <div id="img-nav">
        <a href="#" class="arrow left"><img src="img/left.png"></a>
        <a href="#" class="arrow right"><img src="img/right.png"></a>
    </div>

<ul id="images">
    <li class="img_li d_on"><img src="img/1.jpg"></li>
    <li class="img_li"><img src="img/2.jpg"></li>
    <li class="img_li"><img src="img/3.jpg"></li>
    <li class="img_li"><img src="img/4.jpg"></li>
    <li class="img_li"><img src="img/5.jpg"></li>
    <li class="img_li"><img src="img/6.jpg"></li>
    <li class="img_li"><img src="img/7.jpg"></li>
    <li class="img_li"><img src="img/8.jpg"></li>
</ul>
</body>

<script type="text/javascript">

    var ul = document.querySelector(".images");
    var img_li = document.querySelectorAll(".img_li");
    var pointer = document.querySelector(".d_on");
    var left = document.querySelector(".left");
    var right = document.querySelector(".right");


    //right button

    right.addEventListener("click",function(){
        for(i=0; i < img_li.length; i++){
            var elem = img_li[i];
            var d_check =  elem.classList.contains("d_on");
            var elemNext = elem.nextElementSibling;

            console.log(i);

            if(i==(img_li.length)-1){
                elem.classList.remove("d_on");
                i = 0;
                img_li[0].classList.add("d_on");
                console.log("working_If");
                break;
            }

            if(d_check){
                elem.classList.remove("d_on");
                if(elemNext){
                    elemNext.classList.add("d_on");

                    break;
                }
            }// end of d_check

        }//end of loop
    });//end of event


    // left button

    left.addEventListener("click",function(){
        for(i=img_li.length; i >= 0 ; i--){
            console.log(img_li[i]);//working
            var elem = img_li[i];
            var d_check =  elem.classList.contains("d_on");
            var elemNext = elem.nextElementSibling;
            var elemPrev = elem.previousElementSibling;
        }//end of loop
    });//end of event

</script>