Javascript 即使使用e.preventDefault（）在表单中单击提交后重新加载页面；

即使使用

e.preventDefault（），当我按submit时，我的页面仍会继续重新加载因此我无法看到错误消息。我的目标是让用户输入一个div（待办事项列表）中显示的文本，如果他们单击另一个页面（iframe）上的按钮，他们将在另一个待办事项列表中获得这些输入。但是，我只需要帮助，让用户输入显示在待办事项列表div中，但页面只是不断地重新加载。


这是我的代码，它的格式不是这样的，你可以看到我的代码


数据共享
待办事项清单
第一项任务

今天所有简单的作业



下面是一个独立页面的iframe


我的另一页：


待办事项清单：
第一项任务

/*
以下声明是通过使用
HTMLFormControlsCollection API
*/
//在两个页面上都存在
var form=document.forms[0]；
//所有表单控件的节点列表
var ui=form.elements；
//关于index.html
var data=ui.name1；
//在两个页面上都存在
var out=ui.out；
//页面1.html上的按钮
var btn=ui.btn；
//在上注册“提交”事件
表单。addEventListener（“提交”，保存数据）；
//在page1.html上的按钮上注册“单击”事件
btn.addEventListener（'单击'，获取数据）；
//在index.html上提交时调用回调
函数saveData（e）{
/* 
阻止将数据发送到服务器和
重置自身
*/
e、 预防默认值（）；
//从index.html上获取数据
var str=data.value；
//将数据保存到本地存储
setItem（'name1'，JSON.stringify（str））；
//通知用户
out.innerHTML=`${str}`；
}
//在page1.html上单击按钮时调用回调
函数getData（e）{
//从本地存储获取数据
var stored=JSON.parse（localStorage.getItem（'name1'）；
//通知用户
out.innerHTML=`${stored}`
}
函数displayTDL2（）{
document.getElementById（“toDoList2”）.style.display=“block”；
}
对不起，我插入了错误的链接并将其删除，上面的链接应该是正确的