li元素在使用javascript创建时不断消失

Question

我正在尝试使用JavaScript创建一个todo应用程序。它使用输入创建li元素，但一秒钟后它就消失了。有人能告诉我我的代码出了什么问题吗？

let ul = document.getElementById("ul"); //get the main list. capture ul element
let addBtn = document.getElementById("add-btn"); //button
let todoInput = document.getElementById("todo-input"); //targets the input
addBtn.addEventListener("click", function() {
let list = document.createElement("li");
list.innerHTML = todoInput.value;
ul.appendChild(list);
});

<form>
<h2>Input todo</h2>
<input type="text" class="todo" id="todo-input" placeholder="Type your task to add" />
<button class="btn" id="add-btn" type="submit">Add</button>
</form>
<div class="todo-container">
<h2>Things to do:</h3>
<ul id="ul">
</ul>
</div>
</div>

Answer 1

这样做

addBtn.addEventListener("click", function(e) {
e.preventDefault(); // prevent the default behavior (refresh)
let list = document.createElement("li");
list.innerHTML = todoInput.value;
ul.appendChild(list);
});

正在提交页面，您需要阻止该提交，这样页面就不会刷新。