老师看下代码是否正确
来源: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回答
同学你好,代码中问题如下:
1. 当页面上li都删除后,再点击“删除元素”按钮,按键盘f12键,打开控制台,会看到有报错信息,如下:

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

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

2. 当把开始3个li元素删除之后,点击添加按钮添加li元素,鼠标移入前三个的li的时候
没有改变背景颜色。可以把改变颜色的代码封装起来,对长度进行判断,然后调用,参考:

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