Toggle all function not working on my todo list

Question

My code runs correctly except for the toggle all function; it does nothing at all. There are no error messages

I have proof read several times and attempted using boolean value to replace true and false. Nothing is working. The following is the part that doesnt do anything: *this. refers to the todo list. "todos" is an object with two properties: 1. Todo Text, 2. completion status.

The rest of the code already has a for loop in place for displaying todos function as completed or in complete represented by "(x)" for completed and "( )" as incomplete next to the name of todo.

toggleAll: function() {
  var totalTodos = this.todos.legth;
  var completedTodos = 0;
  for (var i = 0; i < totalTodos; i++) {
    if (this.todos[i].completed === true) {
      completedTodos++;
    }
  }
  if (completedTodos === totalTodos) {
    for (var i = 0; i < totalTodos; i++) {
      this.todos[i].completed = false;
    }
  } else {
    for (var i = 0; i < totalTodos; i++) {
      this.todos[i].completed = true;
    }
  }
  this.displayTodos();
};

It is expected to toggle all as completed if any todos is incomplete, and to toggle all todos as incomplete if all are already completed. Instead, the list remains the same as it was before toggleAll is executed. There are no error messages.

Answer 1

If your code does have the this.todos.legth typo in your post, you won't necessarily see an error message because it'll simply return undefined instead of throwing some sort of "property not found" exception that you may see in other languages.

 this.todos = ["some", "objects", "go", "here"]; console.log(this.todos.legth); // returns undefined console.log(this.todos.length); // returns 4 

Then, all your other loops won't do anything because they either iterate to a max value of undefined or create conditions such as completedTodos === totalTodos -> 0 === undefined .

Here's the fixed code.

toggleAll: function() {
    var totalTodos = this.todos.legth;
    var completedTodos = 0;
    for (var i = 0; i < totalTodos; i++) {
        if (this.todos[i].completed === true) {
            completedTodos++;
        }
    }
    if (completedTodos === totalTodos) {
        for (var i = 0; i < totalTodos; i++) {
            this.todos[i].completed = false;
        }
    } else {
        for (var i = 0; i < totalTodos; i++) {
            this.todos[i].completed = true;
        }

    }
    this.displayTodos();
}
};

Answer 2

Some things, your code is not correct since

var totalTodos = this.todos.legth

won't work. Also you can simplify your code abit.. I will asume totalTodos is an Array. Consider using Array built in functions such as filter, map.

so for instance

toggleAll: function() {
    const totalTodos = this.todos.length;
    const todos = this.todos;

    // (1) find out if all are completed using filter
    const areAllCompleted = todos.filter(e => e.completed).length === 
    totalTodos; 

    // (2) Flip all items using Array.map
    this.todos = todos.map(i => {...i, complete: !areAllCompleted })

  this.displayTodos();
};

Hopefully the suggested code is easier to read and you are introduced to the following

...

Array.map

Array.filter

! operator

Check out https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter