javascript元素出现然后消失

我正在做“待办应用”。 我在添加卡片元素时遇到问题

HTML和Javascript文件

const addBtn=document.getElementById（“addBtn”）；
const taskName=document.getElementById（“txtTaskName”）；
const form=document.querySelector（“表单”）；
const eklenceyer=document.getElementById（“eklenceyer”）；
//新任务
const newTask=document.createElement（“div”）
newTask.className=“卡片文本白色bg主mb-3”；
newTask.style=“最小宽度：18rem；”；
const newTaskHeader=document.createElement（“div”）；
newTaskHeader.className=“卡头”；
newTask.innerHTML=“deneme”
const newTaskBody=document.createElement（“div”）；
newTaskBody.className=“卡体”；
const newTaskBodyH=document.createElement（“h5”）；
newTaskBodyH.className=“卡片标题”；
newTaskBodyH.innerText=“deneme”
const newTaskBodyP=document.createElement（“p”）；
newTaskBodyP.className=“卡片文本”；
newTaskBody.appendChild（newTaskBodyH）；
newTaskBody.appendChild（newTaskBodyP）；
newTask.appendChild（newTaskHeader）；
newTask.appendChild（newTaskBody）；
eventlisteners（）；
函数eventListeners（）{
表格。添加的列表（“提交”，添加的BTNinputValue）；
};
函数addBtninputValue（）{
依附儿童（新任务）；
如果（！taskName.value==“”）{
控制台日志（“ee”）；
}
否则{
警惕（“西姆博伊莱梅兹”）；
}
};

待办事项应用程序

新任务
添加
标题
主卡标题
一些基于卡片标题的快速示例文本，构成了卡片的大部分内容
内容
标题
危险卡标题
一些基于卡片标题的快速示例文本，构成了卡片的大部分内容
内容
标题
成功卡片标题
一些基于卡片标题的快速示例文本，构成了卡片的大部分内容
内容
提交表单后，页面会自动刷新，您可以使用preventDefault（）方法防止这种行为，
更改addBtninputValue函数，如下所示：

function addBtninputValue(e){
    e.preventDefault();
    eklencekYer.appendChild(newTask);

    if(!taskName.value==""){
        console.log("ee");
       


    }
    else{
        alert("İsim boş geçilemez");
    }
};


添加按钮具有提交属性。浏览器将尝试发送数据，页面将刷新。我已将其更改为普通按钮，并相应地修改了事件处理程序

我已经将创建新卡的代码移动到一个单独的函数中，这样每次代码运行时它都会返回一个新的div元素。我对它进行了一些重构，以动态地添加标题，您可以进一步重构它，以动态地包含标题和内容


const addBtn=document.getElementById（“addBtn”）；
const taskName=document.getElementById（“txtTaskName”）；
const form=document.querySelector（“表单”）；
const eklenceyer=document.getElementById（“eklenceyer”）；
函数createNewTask（任务）{
const newTask=document.createElement（“div”）
newTask.className=“卡片文本白色bg主mb-3”；
newTask.style=“最小宽度：18rem；”；
const newTaskHeader=document.createElement（“div”）；
newTaskHeader.className=“卡头”；
newTask.innerHTML=“deneme”
const newTaskBody=document.createElement（“div”）；
newTaskBody.className=“卡体”；
const newTaskBodyH=document.createElement（“h5”）；
newTaskBodyH.className=“卡片标题”；
newTaskBodyH.innerText=任务
const newTaskBodyP=document.createElement（“p”）；
newTaskBodyP.className=“卡片文本”；
newTaskBody.appendChild（newTaskBodyH）；
newTaskBody.appendChild（newTaskBodyP）；
newTask.appendChild（newTaskHeader）；
newTask.appendChild（newTaskBody）；
返回新任务；
}
eventlisteners（）；
函数eventListeners（）{
addBtn.addEventListener（“单击”，addBtninputValue）；
};
函数addBtninputValue（）{
appendChild（createNewTask（taskName.value））；
如果（！taskName.value==“”）{
控制台日志（“ee”）；
}否则{
警惕（“西姆博伊莱梅兹”）；
}
};

待办事项应用程序

新任务
添加
标题
主卡标题
一些基于卡片标题的快速示例文本，构成了卡片的大部分内容
内容
标题
危险卡标题
一些基于卡片标题的快速示例文本，构成了卡片的大部分内容
内容
标题
成功卡片标题
一些基于卡片标题的快速示例文本，构成了卡片的大部分内容
内容
非常感谢。我的老师告诉我preventDefault（）只用于滚动条，我没有使用。再次感谢。