我正在尝试用 JavaScript 创建一个任务列表。我希望用户能够添加新的列表项作为任务，但我不知道下一步该怎么做......
所以我的问题如下：
对于用户给出的每个新输入，新的 ul 元素不会将 li 元素添加到 ul 元素，而是继续创建仅包含一个 li 元素。如何将 li 元素添加到同一个 ul 元素，而不为创建的每个新任务/输入创建新的 ul 元素？
这是 html 和 javascript 代码：
<html>
<body>
<div id="createNewTaskContainer">
<form id="taskForm">
<input id="taskInput" type="text" />
<button type="submit" id="createTaskButton">Add</button>
</form>
</div>
<div id="listOfTasksContainer"></div>
</body>
</html>
let toDoList = [];
window.onload = function () {
let form = document.getElementById("taskForm");
form.addEventListener("submit", addTask); }
function insertTasksInHtml() {
let liElement = document.createElement("li");
let ulElement = document.createElement("ul");
ulElement.appendChild(liElement);
document.getElementById("listOfTasksContainer").innerHTML = "";
document.getElementById("listOfTasksContainer").appendChild(ulElement);
console.log(ulElement);
for (let i = 0; i < toDoList.length; i++) {
liElement.innerText = toDoList[i];
}
}
function addTask(e) {
e.preventDefault();
let taskInput = document.getElementById("taskInput").value;
if (taskInput === "") {
alert("Please insert a task before you submit");
} else {
toDoList.push(taskInput);
insertTasksInHtml();
}
}
慕娘9325324
万千封印
相关分类