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: ```

One Task
Two Task

``` CSS: ``` ``` JavaScript: ```

Accepted Answer

The script parses the document only once and `document.querySelector("li.completed.selected")` returns a node. Therefore, removing those classes works only on the One Task which has those classes by the time the script is parsed.

you need to add `onclick` handler manually to every item created, see jsFiddle.

```
    var inputField = document.querySelector("#new_task");
    var myButton = document.querySelector("#add_task");
    var taskList = document.querySelector("#tasks"); 
    var lis = document.querySelectorAll("#tasks li");

function clickHandler() {
      if(event.target.classList.contains("completed"))
         event.target.classList.remove("completed","selected");
      else
         event.target.classList.add("completed","selected");
}

// add onclick handler to existing nodes
for(var i=0; i<lis.length; ++i) lis[i].onclick = clickHandler;

myButton.onclick = function() {
    var newList = document.createElement("li");
    taskList.appendChild(newList);
    newList.innerHTML = inputField.value;
    inputField.value = "";
    // add onclick handler to new nodes
    newList.onclick = clickHandler;

}
```

classList.add Does Not Work

Solution

Problem