Menu
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
691
asked Aug 17 '26 11:08
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);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
