关于js：Uncaught TypeError Cannot read properties of undefined (reading ‘style‘) 全局与局部变量 for循环

最新推荐文章于 2025-11-13 15:44:53 发布

原创

最新推荐文章于 2025-11-13 15:44:53 发布 · 6.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

在尝试点击li元素显示对应div时遇到JavaScript错误：Cannot read properties of undefined (reading 'style')。问题源于for循环内的局部变量作用域限制。解决方案包括使用全局变量或为div添加自定义属性来保存索引，以便在函数体内正确引用。

问题：
想实现点击一个li，就会展示对应的div：
代码为：

var tab_list = document.querySelector('.tab_list');
    var lis = tab_list.querySelectorAll('li');
    var items = document.querySelectorAll('.item');
    for(var i = 0; i < lis.length; i++){
        // 设置每个li的index值
        // lis[i].setAttribute('index',i)
        lis[i].onclick = function (){
            // console.log(this.getAttribute('index'))
            for(var j = 0; j < lis.length; j++){
                lis[j].className = ''
                items[j].style.display = 'none'
            }
            this.className = 'current'
            // var index = this.getAttribute('index')
            items[i].style.display = 'block'
        }
    }

在这里插入图片描述
点击后报错，提示找不到style属性，因此判定为**items[i]**错误。