Question

我正在尝试制作一个待办事项列表。我也不确定为什么我的代码无法正常工作。请将添加项目输入的值从To-Do 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;

非常感谢任何帮助。感谢

Answer 1

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

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

使用Javascript将输入值附加到列表。待办事项清单

1 个答案:

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