classList.add Does Not Work

Question

I'm trying to make a simple to-do list thing using JavaScript. Basically, you enter an item to the input field, it gets added to the list, you click it if it's complete, then it gets crossed. If you click on a list that's already crossed out, that removes that line. But while removing a line works, adding a line through is not working.

HTML:

    <div><input type="text" value="" id="new_task"><button id="add_task">Add Task</button></div>

    <ul id="tasks">
        <li class="completed selected">One Task</li>
        <li>Two Task</li>
    </ul>

CSS:

<style type="text/css" media="screen">      
    /*local styles if any (quick tests and local only overrides)*/

    #tasks li{
        list-style: none;
    }

    #tasks .selected{
        list-style: disc;
    }

    .completed{
        text-decoration: line-through;
    }
</style>

JavaScript:

<script type="text/javascript" charset="utf-8">
    var inputField = document.querySelector("#new_task");
    var myButton = document.querySelector("#add_task");
    var taskList = document.querySelector("#tasks");
    var newList = document.createElement("li"); 
    var completeTask = document.querySelector("li.completed.selected");
    var incompleteTask = document.querySelector("li:not([class])");

    myButton.onclick = function() {

    taskList.appendChild(newList);
    newList.innerHTML = inputField.value;
    inputField.value = "";
    }

    completeTask.onclick = function() {
    event.target.classList.remove("completed","selected");
    }

    incompleteTask.onclick = function() {
    event.target.classList.add("completed","selected");
    }




</script>

Answer 1

You can simply use the toggle method of classList to swap the classes of you lis. Just select all your li and set their click event handler to a function that toggles the classes.

function ch() {
    this.classList.toggle("completed");
    this.classList.toggle("selected");
}

var items = document.querySelectorAll('li');
for (var x = items.length - 1; x >= 0; x--){
    items[x].onclick = ch;
}

http://jsfiddle.net/RXH69/