老师请帮我看一下！

来源：11-2 编程练习

Edward666

2019-08-03 12:26:40

我感觉我的逻辑没有问题啊，问题是出在哪里了啊？

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style type="text/css">
    html,
    body {
        margin: 0;
        padding: 0;
    }

    div:not(:nth-of-type(2)) {
        width: 500px;
        height: 100%;
        background-color: #a0e4ff;
        margin: 0 auto;
    }
    /*ul默认有外边距*/

    ul {
        width: 300px;
        height: 100%;
        background-color: #ecc7ea;
        list-style: none;
        /*清除默认边距*/
        margin: 0;
        padding: 0;
        margin: 20px auto;
        margin-bottom: 30px;
    }

    li {
        width: 200px;
        height: 30px;
        line-height: 30px;
        margin: 30px auto;
        background-color: #cdffc0;
    }
    </style>
</head>

<body>
    <div id="box">
        <button id="btnAdd">添加元素</button>
        <button id="btnRemove">删除元素</button>
        <ul id="list">我是ul
            <li>我是li1</li>
            <li>我是li2</li>
            <li>我是li3</li>
        </ul>
    </div>
    <script type="text/javascript">
    var list = document.getElementById("list");
    var lists = list.children;
    var len = lists.length;
    for(var i = 0; i<len; i++){
        lists[i].onmouseover = function(){
            lists[i].style.backgroundColor="blue";
        }
        lists[i].onmouseout = function(){
            lists[i].style.backgroundColor="orange";
        }
    }
    var btnAdd = document.getElementById("btnAdd"),
        btnRemove = document.getElementById("btnRemove");
    btnAdd.onclick = function(){
        if(len){
            var newtext = document.createTextNode("我是li"+(len+1));
            var newli = document.createElement("li");
            newli.appendChild(newtext);
            list.appendChild(newli);
        }
    }
    btnRemove.onclick = function(){
        list.removeChild(list.lastElementChild);
    }
    </script>
</body>
</html>

写回答

3回答

好帮手慕夭夭

2019-08-03

已采纳

你好同学，解答如下：

首先代码执行过去就不会再次执行了，除非写在事件中，这样事件触发的时候，就会执行事件中的代码。
len是前面定义的变量，执行过去就不会再次执行，所以它不会同步更新li的长度，即每一次点击的时候，len就会加1，当删除的时候，len并没有减去1。所以不对哦。
而lists.length是获取li的长度，不管增加或者减少，每次触发事件，都会执行lists.length获取当前li的长度。所以这个是对的。
for循环嵌套事件的出现的问题：当页面打开的时候，for循环就会执行，在循环的过程中，i的值是变化的，这样依次为每一个li绑定事件。当i等于3的时候，不满足条件跳出循环。记住这一块是页面打开的时候执行的，此时i的值已经是3了。
上面已经说过了，页面打开的时候执行for循环已经把i的值改为3了，所以事件触发的时候，拿到的值永远是3。同学可以在事件中输出一下i的值就明白了。