当前位置：网站首页>Uncaught typeerror cannot set properties of undefined (setting 'classname') reported by binding onclick event in jsfor loop

Uncaught typeerror cannot set properties of undefined (setting 'classname') reported by binding onclick event in jsfor loop

2022-06-25 06:23:00 【m0_ fifty-one million two hundred and seventy-four thousand fou】

If you are little white , This set of information can help you become a big bull , If you have rich development experience , This set of information can help you break through the bottleneck
2022web Full set of video tutorial front-end architecture H5 vue node Applet video + Information + Code + Interview questions .

I want to achieve the following results ： Click on the column above , Switch the contents of the following columns
Insert picture description here

Write the code as follows （ It mainly depends on js part ）

<!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> The column 1</li>
            <li> The column 2</li>
            <li> The column 3</li>
        </div>
        <div class = "tab_con" style="display: block;"> The column 1 The content of </div>
        <div class = "tab_con"> The column 2 The content of </div>
        <div class = "tab_con"> The column 3 The content of </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(){
                //  The columns above switch 
                for(var j = 0;j<tab_list.length;j++){
                    tab_list[j].className = "tab";
                }
                tab_list[i].className = "tab red";

                //  The effect of the following text 
                for(var j = 0;j<tab_con.length;j++){
                    tab_con[j].style.display = "none";
                }
                tab_con[i].style.display = "block";

            }
        }



    </script>
</body>
</html>

It turns out that the report is wrong ：Uncaught TypeError: Cannot set properties of undefined (setting 'className') at HTMLDivElement.tab.<computed>.onclick

Baidu for a while , Test yourself again , Find the following code ：

<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(" The column " + i + " By clicking the ");
            }
        }



    </script>

Printing ,i by 3, Instead of thinking 0、1、2.

After consulting the data, we know ：

stay for In circulation , For each tab_list binding onclick Event monitoring , But when the function executes ,i The cycle has ended , So the printout is 3.

namely , We are for The event listener function in the loop , You need to avoid using circular variables i

that , If it involves tab_list[i], We can use this; If it involves tab_con[i], That is to use i Get other elements , Then we can give tab_list Add a property index, And then in onclick Function , Get this property , That is, get what we want i

The code is as follows ：

<!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> The column 1</li>
            <li> The column 2</li>
            <li> The column 3</li>
        </div>
        <div class = "tab_con" style="display: block;"> The column 1 The content of </div>
        <div class = "tab_con"> The column 2 The content of </div>
        <div class = "tab_con"> The column 3 The content of </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(" The column " + index + " By clicking the ");
                //  The columns above switch 
                for(var j = 0;j<tab_list.length;j++){
                    tab_list[j].className = "";
                }
                tab_list[index].className = "current";
                console.log(this.className);
                //  The effect of the following text 
                for(var j = 0;j<tab_con.length;j++){
                    tab_con[j].style.display = "none";
                }
                tab_con[index].style.display = "block";

            }
        }
    </script>
</body>
</html>
原网站

版权声明
本文为[m0_ fifty-one million two hundred and seventy-four thousand fou]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202201235195816.html

边栏推荐

猜你喜欢

随机推荐