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 li s. 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/

Answer 2

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;

}

Answer 3

var element:any = document.querySelector('.' + ele[0].toUpperCase().toString())
console.log(element)`enter code here`
setTimeout(() => {
element.classList.add('classname');
}, 500);

I just used setTime out for this, and working fine.