While practicing a course, I encountered a roadblock at this specific step. Unsure of where the issue lies. Any thoughts?
var todoList = {
todos: [],
displayTodo: function() {
if (this.todos.length === 0) {
console.log('todos are empty')
} else {
console.log("my todos: ");
for (i = 0; i < this.todos.length; i++) { // Potential problem lies within this for loop
if (this.todos[i].complited === true) {
console.log("(X) " + this.todos[i].todoText);
} else {
console.log("( ) " + this.todos[i].todoText);
}
}
}
},
addTodo: function(todoText) {
this.todos.push({
todoText: todoText,
completed: false
});
this.displayTodo();
},
changeTodo: function(index, newValue) {
this.todos[index].Text = newValue;
this.displayTodo();
},
deletTodo: function(position) {
this.todos.splice(position, 1);
this.displayTodo();
},
toggelComplited: function(position) // This seems to be functioning correctly
{
var todo = this.todos[position];
todo.completed = !todo.completed;
this.displayTodo();
}
};<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Greetings Bilal!</h1>
</body>
</html>This is the output displayed in my console (refer to the comments below ==> //....):
todoList.displayTodo()
< Todos are empty
todoList.addTodo("first")
< My todos: < ( ) first
todoList.addTodo("second")
< My todos:
< ( ) first
< ( ) second
todoList.todos[ 0 ]
< {todoText: "first", completed: false}
todoList.todos[ 1 ]
< {todoText: "second", completed: false}
todoList.toggelComplited(0)
< My todos:
< ( ) first // Instead, it should display: (X) first
< ( ) second