CODEWITHSUNDEEP
javascriptarrays
teninchhero
teninchhero

Reputation: 153

Can't empty my array in my to-do list

I've a to-do list where you can add tasks, complete them and delete them. Now I want a function that deletes the entire list. Which means that I want to empty the whole array. The problem is that, when I click "Delete list", the list stays intact. I've used alert("test"); and therefor I know that the function is being called on right. So how come the list is still there? The code for the delete function is at the bottom. 

window.onload = function() {
var taskList = [];                                          

var ul = document.getElementById("ulList");

// set focus on the text field
document.getElementById("toDoTask").focus();

// find the add id and onclick, go to function addTolist
document.getElementById("add").onclick = addToList;
document.getElementById("delete").onclick = deleteList;


/*
 *  Function that add tasks to the list and creates the list that appends to the ul element in the html
 *  Just alert an error if the user didnt add a task
 */

function addToList() {
    var task = document.getElementById("toDoTask").value;

    // check if user forgot to write a task
    if(task.length == 0){
        alert("You forgot to add a task");


    } 

    else {
        // add task to the taskList array
        taskList.push(task);  

        for(i =0; i < taskList.length; i++) {

            // create element li and add task to it
            var li = document.createElement('li');                         
            li.appendChild(document.createTextNode(taskList[i]));        

            // create imgDelete, add [x] and append to li
            var imgDelete = document.createElement('img');
            imgDelete.src = 'img/delete.png';
            imgDelete.addEventListener("click", deleteTask);
            li.appendChild(imgDelete);

            // create spanComplete, add [done] and append to li
            var imgComplete = document.createElement('img');
            imgComplete.src = 'img/complete.png';
            imgComplete.addEventListener("click", completeTask);
            li.appendChild(imgComplete);                                  
        }

        //append li to ul 

        ul.appendChild(li);

    }

}

/*
 * Complete the task by adding a class that change the color to green and add a line-through.
 * 
 */

function completeTask() {
    // set the default parent to li
    var li = this.parentNode;
    li.className = "line-through";
}

/*
 * Delete the task 
 * 
 */

function deleteTask() {
    var li = this.parentNode;
    ul.removeChild(li);
}

function deleteList() {
    taskList= [] ;
}

};

If you got some other comments about the code, please tell. Very new at this and willing to learn!

Upvotes: 2

Views: 833

Answers (1)

salezica
salezica

Reputation: 76949

Inside the addToList() function, you reconstruct the task list displayed on-screen from your array of tasks.

Extract this logic into a function called updateList(), and call it from addToList() after pushing into the array.

Then, in the deleteList() function, call updateList() too after clearing the array.

I don't see you removing all the existing elements before re-adding them. You could do:

while (taskList.firstChild) {
    taskList.removeChild(taskList.firstChild);
}

Note, too, that it's not necessary to empty and repopulate the entire list: you could keep the node's associated with your task items in the array, and handle them 1 by 1.

Upvotes: 1

Related Questions