为何点击添加按钮后，创建的li会立即消失

小黄练编程 · 发表于 2022-4-28 16:02:30

您需要登录才可以下载或查看，没有账号？立即注册

x

<!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">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<title>Document</title>
<style>
input{
display:inline-block;
}
.one{
width:500px;
height:400px;
background-color:yellow;
}
.two{
width:500px;
height:500px;
background-color:aqua;
}
</style>
</head>
<body>
<form>
<input id="usname" value="sd" type="text">
<input id="checked" type="checkbox">
<button>添加</button>
</form>
<div class="one">
<ol></ol>
</div>
<div class="two">
<ol></ol>
</div>
<script>
var date=[
{
title:'未来很美好',
done:false,
},
{
title:'美好的一天',
done:false,
},
];
//本地存储里只能存储字符串的数据格式，把我们的数组对象转换为字符串格式 JSON.stringfy();
localStorage.setItem('todo',JSON.stringify(date));
//
let ipt=document.querySelector('#usname');
const checked=document.querySelector('#checked');
const btn=document.querySelector('button');
const one=document.querySelector('.one');
const two=document.querySelector('.two');
const ol1=one.querySelector('ol');
const ol2=two.querySelector('ol');
console.log(ol1);
console.log(ol2);
btn.addEventListener('click',function(){
let val=ipt.value;
localStorage.setItem('uname',val);
let news=localStorage.getItem('todo',date);
let li= document.createElement('li');
ol1.appendChild(li);
li.innerHTML=news;
});
</script>
</body>
</html>

复制代码

账号		自动登录	找回密码
密码			立即注册