我正在尝试用 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();}}
2 回答
慕娘9325324
TA贡献1783条经验 获得超4个赞
let toDoList = [];
window.onload = function () {
let ulElement;
let node;
let textnode;
let form = document.getElementById("taskForm");
form.addEventListener("submit", addTask); }
function insertTasksInHtml(newTask) {
ulElement = document.getElementById("list");
node = document.createElement("li");
textnode = document.createTextNode(newTask);
node.appendChild(textnode);
ulElement.appendChild(node);
}
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(taskInput);
}
}
<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">
<ul id="list">
</ul>
</div>
</body>
</html>
万千封印
TA贡献1891条经验 获得超3个赞
let toDoList = [];
window.onload = function () {
let ulElement;
let node;
let textnode;
let form = document.getElementById("taskForm");
form.addEventListener("submit", addTask); }
function insertTasksInHtml(newTask) {
ulElement = document.getElementById("list");
node = document.createElement("li");
textnode = document.createTextNode(newTask);
node.appendChild(textnode);
ulElement.appendChild(node);
}
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(taskInput);
}
}
<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">
<ul id="list">
</ul>
</div>
</body>
</html>
添加回答
举报
0/150
提交
取消