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

最新推荐文章于 2024-07-13 23:25:35 发布

AIGC镜像空间

最新推荐文章于 2024-07-13 23:25:35 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 html 面试文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/Bejpse/article/details/123079883

在尝试使用JavaScript的for循环为HTML元素绑定onclick事件时遇到错误：Uncaught TypeError: Cannot set properties of undefined (setting 'className')。问题出在事件函数执行时，循环变量i已更新至最后的值。解决方案是避免在事件监听函数中直接使用循环变量i，可以使用this关键字或者为元素添加index属性来获取正确的索引。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我想要实现如下效果：点击上面的栏目，切换下面栏目的内容
在这里插入图片描述

编写代码如下（主要看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>
        <