我正在尝试使用 JavaScript（和 HTML/CSS）制作待办事项列表，并设法使添加按钮使用以下代码：
function addTask() {
let task = document.querySelector("li");
let inputVal = document.getElementById("task").value;
task.innerHTML = inputVal;
}
但是，每当我在输入中写入内容并按下添加按钮时，相同的列表元素都会更改，而不是出现在新的列表元素上。有谁知道如何更改它或添加代码以便新任务出现在新列表元素上？我的 HTML 代码如下：
<h1>To-Do List</h1>
<h2>Today</h2>
<ul>
<li id="list"></li>
<li id="list"></li>
<li id="list"></li>
<li id="list"></li>
<li id="list"></li>
</ul>
<input type="text" id="task" value=""> <br>
<button onclick="addTask()" type="button" id="add">Add task</button>
我认为你需要像这样修改：
function addTask() {
let task = document.createElement("li");
let inputVal = document.getElementById("task").value;
let todo = document.getElementById("todo");
task.innerHTML = inputVal;
todo.appendChild(task);
}
和你的 html 代码
<h1>To-Do List</h1>
<h2>Today</h2>
<ul id="todo"></ul>
<input type="text" id="task" value=""> <br>
<button onclick="addTask()" type="button" id="add">Add task</button>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句