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;
    }

    pleted{
        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("lipleted.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>

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>

• javascript
• onclick

• 1 classList isn't supported by IE9 and lower. I suppose it's not what you're using? Because that event keyword looks suspicious... – MaxArt Commented Feb 23, 2014 at 23:36
• What you need to call functions by elements' class is event delegation. Or you can have the event handlers check the element class and do the appropriate task. – Musa Commented Feb 23, 2014 at 23:40
• @Musa: Could you elaborate more? Especially the second sentence. I'd appreciate it. – Jaeeun Lee Commented Feb 23, 2014 at 23:43
• Check incompleteTask is actually referencing the elements you believe it does. It's possible your making the selection before the DOM has completed loading. – Boaz Commented Feb 23, 2014 at 23:43
• In my case more than one selector had that class, so make sure to see document.querySelectorAll(selector) if the correct element is selected – Shivam Jha Commented Jun 7, 2021 at 16:33

3 Answers 3

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/

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;

}

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.