为啥一按回车就刷新了页面，且本地存储数据也没更新
<!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" >
<input id="checked"type="checkbox">
<button>添加</button>
</form>
<div class="one">
<ol></ol>
</div>
<div class="two">
<ol></ol>
</div>
<script>
var todolist=[
{
title:'未来很美好',
done:false,
},
{
title:'美好的一天',
done:false,
},
];
//
let ipt=document.querySelector('#usname');
const checked=document.querySelector('#checked');
constbtn=document.querySelector('button');
const one=document.querySelector('.one');
const two=document.querySelector('.two');
const ol1=one.querySelector('ol');
constol2=two.querySelector('ol');
console.log(ol1);
console.log(ol2);
//
//本地存储里只能存储字符串的数据格式，把我们的数组对象转换为字符串格式 JSON.stringfy();
localStorage.setItem('todo',JSON.stringify(todolist));
// localStorage.setItem('todo',todolist);
let data=localStorage.getItem('todo');
data=JSON.parse(data);
ipt.addEventListener('keydown',function(event){
if(event.keyCode===13){
//先获取本地存储的数据
var local=getdate();
//更新local数组中的数据（将新的数据追加进去）;
local.push({title:this.value,done:false});
//把更新了的数组local存储给本都存储
savadate(local);
}
});
//读取本地存储的数据
functiongetdate(){
var data=localStorage.getItem('todolist');
if(data!==null){
return JSON.parse(data);
}
else {
return [];
}
}
//将数据存储进本地存储必须是字符串格式所以用JSON.stringify()转化。
//将数据从本地存储中取出来，需要将字符串转化为对象用JSON.parse();
//将更新的数组存储给本地存储及替换掉以前的就数组本地存储数据
function savadate(data){
localStorage.setItem('todolist',JSON.stringfy(data));
}
</script>
</body>
</html>
你了解
local.push({title:this.value,done:false}); 这里的this是谁吗 按回车键自动刷新是form的特性
如果你一定要监听回车事件 就要取消这个特性阻止form的自动提交 <form> 改成 <form onsubmit="return false;"> wp231957 发表于 2022-4-29 09:43
你了解
local.push({title:this.value,done:false}); 这里的this是谁吗
文本框中的值啊，输入的文字 kogawananari 发表于 2022-4-29 11:41
改成
报错了 小黄练编程 发表于 2022-4-30 16:39
报错了
浏览器不会报错 kogawananari 发表于 2022-5-2 14:29
浏览器不会报错
代码报错
页:
[1]