老师看下代码是否正确

来源:11-2 编程练习

vivi_li

2020-04-30 14:02:42

/*有个问题,题目中没有要求动态更新li的鼠标移入移出事件吧?*/

<script type="text/javascript">
   //此处填写代码
   var btnAdd= document.getElementById("btnAdd");
   var btnReamove = document.getElementById("btnRemove")
   var list = document.getElementById("list");
   var li = list.getElementsByTagName("li");
   var len = li.length;
   console.log(li);
   for ( var i = 0; i<len; i++){
       console.log(li[i]);
       li[i].onmouseover=function () {
           this.style.backgroundColor="blue";
       }
       li[i].onmouseout=function () {
           this.style.backgroundColor="red";
       }
   }
   var count=len+1;
   btnAdd.onclick=function () {
       var liText = document.createTextNode("我是li"+count);
       var liCre = document.createElement("li");
       liCre.appendChild(liText)
       list.appendChild(liCre);
       count++;
   }
   btnReamove.onclick=function () {
       list.removeChild(li[li.length-1]);
       count--;
   }
</script>

写回答

1回答

好帮手慕久久

2020-04-30

同学你好,代码中问题如下:

1. 当页面上li都删除后,再点击“删除元素”按钮,按键盘f12键,打开控制台,会看到有报错信息,如下:

http://img.mukewang.com/climg/5eaa9271095cbc9a18760228.jpg

报错后面有错误代码的位置,点击后跳转到报错代码,如下:

http://img.mukewang.com/climg/5eaa927109309cc907390463.jpg

仔细分析发现,当li都删除之后,li的length为0,li[li.length-1]这个元素不存在,所以无法执行removeChild,导致报错;可以做如下修改:

http://img.mukewang.com/climg/5eaa92bd099f377f05540184.jpg

2. 当把开始3个li元素删除之后,点击添加按钮添加li元素,鼠标移入前三个的li的时候

没有改变背景颜色。可以把改变颜色的代码封装起来,对长度进行判断,然后调用,参考:

http://img.mukewang.com/climg/5eaa92d809985ab507600824.jpg

如果我的回答帮到了你,欢迎采纳,祝学习愉快!

0

0 学习 · 40143 问题

查看课程