A function is not working in javaScript

Question

I am learning javaScript and developing a todoList app. I have put everything in an object called todoList,then at very first there's an array of objects that stores tasks in todoList. Every object has two properties i.e (todo=text, status=boolean). After that is a function called showTasks to display tasks in todoList. There is an if statement in showTasks function to check if the todoList is empty or not. After that is a for loop to display all the tasks in the array. Another if statement comes after the for loop to display the status of the tasks. The addTask function is for adding new tasks in the list that adds only the text for the task without the status (status is false by default). The editTask and deleteTask functions are pretty self explanatory. The last function called toggleStatus is to switch the status of a task and it is not working and i can't figure out why.

var todoList = {

// Storing tasks
tasks: [],

// Displaying tasks
showTasks: function() {
    if (this.tasks.length === 0) {
        console.log("There's no tasks in the list.");
    } else {
        console.log("My Tasks:");
        for (var i = 0; i < this.tasks.length; i++) {
            if (this.tasks.status === true) {
                console.log("(X)", this.tasks[i].todo);
            } else {
                console.log("( )", this.tasks[i].todo);
            }
        }
    }
},

// Adding a new task
addTask: function(task) {
    this.tasks.push({
        todo: task,
        status: false
    });
    this.showTasks();
},

// Editing an existing task
editTask: function(count,task) {
    this.tasks[count].todo = task;
    this.showTasks();
},

// Deleting a task
deleteTask: function(count) {
    this.tasks.splice(count,1);
    this.showTasks();
},
// Changing status
toggleStatus: function(count) {
  var task = this.tasks[count];
    task.status = !task.status;
    this.showTasks();
}

};

How are you calling `toggleStatus`? Are you getting errors in your Dev Tools console tab? — Patrick Evans, Nov 15 '16 at 08:37
Can you please upload the html as well to check where the toggleStatus function is being called — GraveyardQueen, Nov 15 '16 at 08:37
i haven't created any html file till now. i am calling todoList.toggleStatus in console.log and when i do so it should display that specific task with a (X) as mentioned in showTasks function. but its appearing like "( )Task 1" — Waqas Arshi, Nov 15 '16 at 09:01

ppovoski · Answer 1 · 2016-11-15T08:55:55.150

0

Try this:

toggleStatus: function(count) {
  var task = this.tasks[count];
    this.tasks[count].status = !task.status;
    this.showTasks();
}

edited Nov 15 '16 at 08:55

answered Nov 15 '16 at 08:39

ppovoski

4,553
5
22
28

This would be 'this.tasks[count].status = !task.status;' – madhur Nov 15 '16 at 08:54
@madhur, Nice catch! – ppovoski Nov 15 '16 at 08:56

Tigger · Answer 2 · 2016-11-15T09:04:55.113

0

You are creating a new task, then changing its status here:

toggleStatus: function(count) {
    var task = this.tasks[count];
    task.status = !task.status;
    this.showTasks();
}

What you need to do is change the status of the stored task in this.tasks like so:

toggleStatus: function(count) {
    this.tasks[count].status = !this.tasks[count].status;
    this.showTasks();
}

Edit:

As found by Patrick Ferreira. You also need to change showTasks from:

if (this.tasks.status === true) {

To:

if (this.tasks[i].status === true) {

edited Nov 15 '16 at 09:04

answered Nov 15 '16 at 08:39

Tigger

8,980
5
36
40

In your solution, `task` is undefined. – ppovoski Nov 15 '16 at 08:40
thanQ for your consideration but its not working. when i do (todoList.toggleStatus) it should print that task with (X) as mentioned in showTask function. – Waqas Arshi Nov 15 '16 at 08:59

score 0 · Answer 3 · answered Nov 15 '16 at 08:43

0

Try this: I would suggest you change count to index

toggleStatus: function(index) {
    this.tasks[index].status = !this.tasks[index].status;
    this.showTasks();
}

answered Nov 15 '16 at 08:43

Akinjide

2,723
22
28

score 0 · Answer 4 · answered Nov 15 '16 at 08:45

There is no pass by reference in javascript, so when you are doing this

var task = this.tasks[count];

It is just making another copy of this.tasks[count] and you are updating this copy, the real value is not getting updated. So this is the problem. The solution is

this.tasks[count].status = !this.tasks[count].status;

Hope it helps

score 0 · Accepted Answer · edited May 23 '17 at 12:24

Your if statement in for loop have a typo :D

This is the good syntax:

if (this.tasks[i].status) {

By the way I would wrote it like that, prototyping is kind better because your object don't store as many functions as objects declared and then is faster to create ;) see JS - Why use Prototype?

function TodoList() {
    // Storing tasks
    this.tasks = [];
}


TodoList.prototype = {
    // Displaying tasks
    showTasks: function() {
        if (this.tasks.length === 0) {
            console.log("There's no tasks in the list.");
        } else {
            console.log("My Tasks:");
            for (var i = 0; i < this.tasks.length; i++) {
                if (this.tasks[i].status) {
                    console.log("(X)", this.tasks[i].todo);
                } else {
                    console.log("( )", this.tasks[i].todo);
                }
            }
        }
    },

    // Adding a new task
    addTask: function(task) {
        this.tasks.push({
            todo: task,
            status: false
        });
        this.showTasks();
    },

    // Editing an existing task
    editTask: function(count, task) {
        this.tasks[count].todo = task;
        this.showTasks();
    },

    // Deleting a task
    deleteTask: function(count) {
        this.tasks.splice(count, 1);
        this.showTasks();
    },
  
    // Changing status
    toggleStatus: function(count) {
      var taskStatus = !this.tasks[count].status;
      this.tasks[count].status = taskStatus;
      this.showTasks();
    }
};

var t = new TodoList();
t.addTask("yowwww");
t.addTask("miaou");
t.editTask(1, "miawwwwwou");
t.toggleStatus(0)

i need the todoList in an object but you turned it into a function? is this the only way to make my code work? — Waqas Arshi, Nov 15 '16 at 09:08
@WaqasArshi Your syntax still working, choose the Tigger one to get the same syntax. I just expose in my response another way to declare a class in more conventional way. — Patrick Ferreira, Nov 15 '16 at 09:18
yes i got it. actually i am not a programmer, i am learning, that's why its hard to understand things sometimes. by the way thanQ very much for your consideration. — Waqas Arshi, Nov 15 '16 at 09:21

A function is not working in javaScript

5 Answers5