jsfor循环里绑定onclick事件报错Uncaught TypeError Cannot set properties of undefined (setting ‘className‘)

我想要实现如下效果：点击上面的栏目，切换下面栏目的内容

编写代码如下（主要看js部分）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.tab{display: inline-block;width: 100px;height: 50px;background-color: #aaa;}.current{background-color: yellow;}.content{display: none;}</style>
</head>
<body><div class = "tab"><div class = "tab_list"><li>栏目1</li><li>栏目2</li><li>栏目3</li></div><div class = "tab_con" style="display: block;">栏目1的内容</div><div class = "tab_con">栏目2的内容</div><div class = "tab_con">栏目3的内容</div></div><script>var tab_list = document.querySelector(".tab_list").querySelectorAll("li");var tab_con = document.querySelectorAll(".tab_con");for(var i = 0;i<tab_list.length;i++){tab_list[i].onclick = function(){// 上面的栏目切换for(var j = 0;j<tab_list.length;j++){tab_list[j].className = "tab";}tab_list[i].className = "tab red";// 下面文字的效果for(var j = 0;j<tab_con.length;j++){tab_con[j].style.display = "none";}tab_con[i].style.display = "block";}}</script>
</body>
</html>

结果发现报错：Uncaught TypeError: Cannot set properties of undefined (setting ‘className’) at HTMLDivElement.tab..onclick

查阅资料发现：

<script>var tab_list = document.querySelector(".tab_list").querySelectorAll("li");var tab_con = document.querySelectorAll(".tab_con");for(var i = 0;i<tab_list.length;i++){tab_list[i].onclick = function(){console.log("栏目" + i + "被点击了");}}</script>

打印中，i为3，而不是以为中的0、1、2。

查阅资料后知道：

在for循环中，为每个tab_list绑定onclick事件监听，但是在函数执行时，i已经循环结束，所以打印输出的是3。

即，我们在for循环中的事件监听函数，需要避免使用到循环变量i

那么，如果涉及到tab_list[i]，我们可以使用this；如果涉及到tab_con[i]，也就是利用到i得到别的元素，那么我们可以给tab_list增加一个属性index，然后在onclick函数中，得到这个属性，即得到我们想要的i

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}.tab{width: 400px;margin: 100px auto;}.tab .tab_list li{display: inline-block;width: 100px;height: 50px;line-height: 50px;text-align: center;background-color: #aaa;}.tab .tab_list .current{background-color: yellow;}.content{display: none;}</style>
</head>
<body><div class = "tab"><div class = "tab_list"><li>栏目1</li><li>栏目2</li><li>栏目3</li></div><div class = "tab_con" style="display: block;">栏目1的内容</div><div class = "tab_con">栏目2的内容</div><div class = "tab_con">栏目3的内容</div></div><script>var tab_list = document.querySelector(".tab_list").querySelectorAll("li");var tab_con = document.querySelectorAll(".tab_con");for(var i = 0;i<tab_list.length;i++){tab_list[i].setAttribute("index",i);tab_list[i].onclick = function(){var index = this.getAttribute("index");console.log("栏目" + index + "被点击了");// 上面的栏目切换for(var j = 0;j<tab_list.length;j++){tab_list[j].className = "";}tab_list[index].className = "current";console.log(this.className);// 下面文字的效果for(var j = 0;j<tab_con.length;j++){tab_con[j].style.display = "none";}tab_con[index].style.display = "block";}}</script>
</body>
</html>

js代码中for循环里绑定onclick事件报错Uncaught TypeError Cannot set properties of undefined (setting ‘className‘)相关推荐

【解决】控制台报错Uncaught TypeError: Object(...) is not a function at eval (vue-router.esm-bundler.js
打开http://localhost:8080/,控制台报错 Uncaught TypeError: Object(...) is not a functionat eval (vue-router. ...
JS报错-Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on...
报错信息:Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on stric ...
onclick点击事件报错Uncaught ReferenceError: xxx is not defined
有时候会直接在html中写onclick事件我认为一般人是不会将onclick写错的,简单写一个例子,就是οnclick="方法名" <div onclick=" ...
代码报错 Uncaught TypeError: Converting circular structure to JSON
报错内容 Uncaught TypeError: Converting circular structure to JSON--> starting at object with constru ...
JS 报错getElementsByClassName.appendChild报错“Uncaught TypeError: s.appendChild is not a function”
getElementsByClassName这个方法返回的是:返回文档中所有指定类名的元素集合.因为集合是没有appendChild这个方法的,所以使用getElementsByClassName这个 ...
JS报错 Uncaught TypeError: undefined is not a function，解决
Chrome调试报错:Uncaught TypeError: undefined is not a function,所有的数据都显示不出来原因正如错误提示:调用了一个没有定义的方法,实际是一个空值 ...
在项目中使用 vuepress 搭建组件文档报错 Uncaught ReferenceError: global is not defined
问题描述解决方案在config.js文件里面加上如下配置: configureWebpack: {node: {global: true,process: true}, ... } 写在最后的话: ...
解决Vue3报错：app.js:314 Uncaught TypeError: Cannot read properties of undefined (reading ‘forEach‘)
配置 vue3的时候,总是出现错误,但好像所有流程都是对的,也没错. 解决方案,可能是配置的routes写错了写成了routers
关于05.轮播图.html:177 Uncaught TypeError: Cannot set properties of null (setting ‘onclick’）
在获取元素的时候, var banner = document.querySelector('banner') 类名没有加点 var banner = document.querySelector(' ...

js代码中for循环里绑定onclick事件报错Uncaught TypeError Cannot set properties of undefined (setting ‘className‘)

jsfor循环里绑定onclick事件报错Uncaught TypeError Cannot set properties of undefined (setting ‘className‘)

js代码中for循环里绑定onclick事件报错Uncaught TypeError Cannot set properties of undefined (setting ‘className‘)相关推荐

最新文章

热门文章