几个问题想请教老师，谢谢
来源：7-2 编程练习
qq_鸭绿桥第一帅哥_0
2019-05-11 12:17:51
问题一：为什么在按钮click事件中，将lis.length换成len，结果会出问题？lis.length和len有什么区别吗
问题二：为什么for循环中的lis.length不会动态改变，而按钮click事件中的lis.length会动态改变？
问题三：请问我的代码是否符合要求。
<!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: #00c4ff7a;
margin: 0 auto;
}
/*ul默认有外边距*/
ul {
width: 300px;
height: 100%;
background-color: #f9c3e6d6;
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 btnAdd=document.getElementById('btnAdd');
var btnRemove=document.getElementById('btnRemove');
var lis = document.getElementsByTagName("li");
var len=lis.length;
var ul=document.getElementById('list');
for(var i=0;i<lis.length;i++){
lis[i].onmouseover=function(){
this.style.backgroundColor='blue';
}
lis[i].onmouseout=function(){
this.style.backgroundColor='orange';
}
}
btnAdd.onclick=function(){
var li=document.createElement('li');
var txt=document.createTextNode('我是li'+(lis.length+1));
// var txt=document.createTextNode('我是li'+(len+1));此时出现问题，数字固定
li.appendChild(txt);
ul.appendChild(li);
}
btnRemove.onclick=function(){
// if (len>0) 删到最后一个，再按删除会报错
if (lis.length>0) {
ul.removeChild(ul.lastElementChild);
}
}
</script>
</body>
</html>3回答
-
你好同学，解答如下：
因为len是定义的一个变量，len赋值为3，代码中并没有改变len的值，所以一直为固定的值哦。
除非你在点击事件中重新改变len的值，如下：
而lis.length是通过属性的调用去获取元素的长度，当点击的时候，会获取li的长度，如果li变化了，那么获取到的也就是最新的值。
第二个删除的错误也是len是固定值影响的，当你删除最后一个的时候，此时li已经没有了，但是len>0这个条件永远成立，所以再次删除会报错，因为此时已经没有li了。
祝学习愉快 ，望采纳。
0 -
qq_鸭绿桥第一帅哥_0
提问者
2019-05-11
谢谢老师，关于第一个问题。
将添加元素按钮的click事件中的lis.length替换成len，结果变为这样：
将删除元素按钮的click事件中的lis.length替换成len，结果变为删完最后一个元素后继续删除，控制台报错：
<!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: #00c4ff7a; margin: 0 auto; } /*ul默认有外边距*/ ul { width: 300px; height: 100%; background-color: #f9c3e6d6; 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 btnAdd=document.getElementById('btnAdd'); var btnRemove=document.getElementById('btnRemove'); var lis = document.getElementsByTagName("li"); var len=lis.length; var ul=document.getElementById('list'); for(var i=0;i<lis.length;i++){ lis[i].onmouseover=function(){ this.style.backgroundColor='blue'; } lis[i].onmouseout=function(){ this.style.backgroundColor='orange'; } } btnAdd.onclick=function(){ var li=document.createElement('li'); var txt=document.createTextNode('我是li'+(len+1)); // var txt=document.createTextNode('我是li'+(len+1));此时出现问题，数字固定 li.appendChild(txt); ul.appendChild(li); } btnRemove.onclick=function(){ // if (len>0) 删到最后一个，再按删除会报错 if (len>0) { ul.removeChild(ul.lastElementChild); } } </script> </body> </html>0 -
好帮手慕夭夭
2019-05-11
你好同学，解答如下：
代码使用lis.length和len实现的效果是一样的，建议同学再测试一下哦，如果有问题可以把自己的代码粘贴到问答区域。
因为代码顺序执行过去就不会再执行了。例如本代码中，for循环会在页面打开的时候执行，此时获取了初始的长度。当你点击按钮的时候，只会执行点击事件中的代码，所以事件中执行的时候，可以重新获取到新的长度。
代码符合要求，实现的效果是正确的。
祝学习愉快 ，望采纳。
0
相似问题