Tag Archives: html

[Solved] Binding onclick event in JS: for loop: error uncaught typeerror: cannot set properties of undefined (setting ‘classname’)

I want to achieve the following effects: click the column above to switch the content of the column below

Write the code as follows (mainly see the 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>栏目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>

The result shows an error: uncaught typeerror: cannot set properties of undefined (setting 'classname') at htmldivelement.Tab.<computed>.onclick

Baidu tested it and found 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("栏目" + i + "被点击了");
            }
        }



    </script>

In printing, I is 3 instead of 0, 1 and 2.

After consulting the data, we know that:

In the for loop, for each tab_List is bound to the onclick event to listen, but when the function is executed, I has ended the loop, so the printout is 3.

That is, the event listening function in the for loop needs to avoid using the loop variable I

So, if tab is involved_List [i], we can use this; If tab is involved_Con [i], that is, use I to get other elements, so we can give tab_List adds an attribute index, and then in the onclick function, we get this attribute, that is, we get the I we want

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>栏目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>

Chrome browser settings cause err when accessing the website_ FAILED

When testing in the test environment, the Chrome browser in one environment cannot be accessed, and the following error is reported: failed to load resource: Net:: err_ FAILED 。 It’s OK to use other browsers, and it’s OK for other colleagues to use chrome browsers.

terms of settlement:

1. Open chrome://flags/#block -insecure-private-network-request

2. Disable block secure private network requests  

 

Error reported using layui $is not defined

The following error occurs when calling a function using the layui template

reason: Layu needs to be pre loaded and defined$

<script type="text/javascript" rel="script">
    layui.use(['table', 'layer', 'form','element'], function(){
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var element = layui.element;
        var $ = layui.$;

</script>

error: resource android:attr/lStar not found [How to Solve]

When integrating androidx.activity:activity in Android projects, an error is reported.xxx/app/build/intermediates/incremental/mergeDebugResources/merged.dir/values/values.xml:5395: error: resource android:attr/lStar not found.error: failed linking references.

Analysis.
1. gradle introduces the configuration.

    def activity_version = "1.4.0-alpha02"

    // Java language implementation
    implementation "androidx.activity:activity:$activity_version"
    // Kotlin
    implementation "androidx.activity:activity-ktx:$activity_version"

2. Project gradle configuration:

buildscript {
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath "com.android.tools.build:gradle:4.0.1"

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

3. The project is a brand-new project and kotlin has not been introduced, so it is not a kotlin version number problem.

4. After modifying the compilesdkversion and targetsdkversion to 31, the operation is normal.

IMG tag onerror event resolves infinite loop error reporting

Problem Description:

problem: the SRC picture in img tag failed to load, and a fragment icon will appear in the original picture position, which is very unpleasant. How to be more beautiful


Cause analysis:

because the reverse display resource cannot be found or the path does not exist, it will be processed according to the IMG default processing method


Solution:

1. Find a default picture to replace

2. Trigger with onerror event

3. The oneror event is triggered repeatedly

<img src="url" onerror= "this.οnerrοr='';this.src='static/images/nop.svg'">

Can be solved

INFO Starting development server…. ERROR Error: Rule can only have one resource source (provided

Problem
when writing a Vue cli project, the following problems occurred when running NPM run serve

after consulting the data, you know that you have installed the latest version of SASS loader, which may be because the version is too new, Incompatible with project plug-ins or dependencies

solution
Enter
in the terminal, delete the newer version NPM uninstall sass loader
install the lower version NPM install sass- [email protected] –save-dev