Appending input value to list using Javascript. To Do List

Question

I am attempting to make a todo list.Not too sure why my code isn't working.Trying to get the value from the add item input to the 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;

Any help is greatly appreciated. Thanks

dfsq · Accepted Answer · 2014-11-01 10:41:32Z

3

appendChild accepts a DOMElement, not a string. You need to create an element first and then append it:

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

Demo: http://jsfiddle.net/6wbsujL5/

edited Nov 1, 2014 at 10:41

answered Nov 1, 2014 at 10:32

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Appending input value to list using Javascript. To Do List

1 Answer 1

Demo: http://jsfiddle.net/6wbsujL5/

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Demo: http://jsfiddle.net/6wbsujL5/

Comments

Your Answer

Sign up or log in

Post as a guest

Related