使用Javascript将输入值追加到列表中.待办事项列表

Appending input value to list using Javascript. To Do List

本文关键字：列表 Javascript 输入 追加 使用      更新时间：2023-09-26

我正在尝试制作一个待办事项列表。不太确定为什么我的代码不起作用。正在尝试从向待办事项ul添加项输入中获取值。

HTML

<body>
<div class = 'container'>
<h3> Add Item </h3>
<input id='newTask' type='text'> <button id='addTaskButton'> Add </button>
<h3> To-Do </h3>
<ul id='toDo'>
<li> <input type='checkbox'<label> Learn Javascript </label> <button class='delete'> Delete </button> </li>
</ul>
<h3> Completed </h3> 
<ul id='completedTasks'>
<li> <input type='checkbox' checked> <label> Buy Peanut Butter </label> <button class='delete'> Delete </button> </li>
</ul>
</div>
<script src = "todolist.js" type="text/javascript"></script>
</body>

Javascript

var taskInput = document.getElementById('newTask');
var addTaskButton = document.getElementById('addTaskButton');
var incompleteTasks = document.getElementById('toDo');
var completedTask = document.getElementById('completedTasks');
var addTask = function () {
    var text = taskInput.value;
    var li = '<li>' + text + '<li>';
    incompleteTasks.appendChild(li);
}
addTaskButton.onclick = addTask;

非常感谢您的帮助。感谢

appendChild接受DOMElement，而不是字符串。您需要先创建一个元素，然后将其附加：

var addTask = function () {
    var text = taskInput.value;
    var li = document.createElement('li');
    li.innerHTML = text;
    incompleteTasks.appendChild(li);
}

演示：http://jsfiddle.net/6wbsujL5/

相关文章：