我正在尝试制作一个待办事项列表。不太确定为什么我的代码不起作用。尝试从添加项目输入到待办事项 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/
关于javascript - 使用 Javascript 将输入值附加到列表。待办事项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26688323/