Почему я получаю сообщение об ошибке в консоли для функции, которая работает?

Question

Итак, у меня есть проблема в JavaScript коде, которую я просто не могу понять. Я делал урок, и все шло хорошо, пока я не получил сообщение об ошибке в консоли о методе, который не определен, но, несмотря на это, он работает как задумано. Я вставлю div HTML в вопросе выше JS кода. Интересно, почему браузер выдает эту ошибку . html: 37)

<div>
            <button onclick="handlers.toggleCompleted()">Toggle Completed</button>
            <input id="toggleCompletedPositionInput" type="number" />
        </div>

        <ul>

        </ul>
        <script>
            var todoList = {
            todos: [],
            displayTodos: function() {
            if (this.todos.length === 0) {
            console.log('Your todo list is empty!');
            } else {
            console.log('My todos:');
            for (var i = 0; i < this.todos.length; i++){
                 if(this.todos[i].completed === 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.displayTodos();
           },
            changeTodo: function(position, todoText){
            this.todos[position].todoText = todoText;
            this.displayTodos();
           },
            deleteTodo: function(position) {
            this.todos.splice(position, 1);
            this.displayTodos();
           },
            toggleCompleted: function(position){
            var todo = this.todos[position];
            todo.completed= !todo.completed;
            this.displayTodos();
           },
            toggleAll: function() {
            var totalTodos = this.todos.length;
            var completedTodos = 0;

            //get number of completed todos
            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();
            }
           };

            var handlers = {
               displayTodos: function () {
                    todoList.displayTodos();
            },
            toggleAll: function () {
                todoList.toggleAll();
              },
            addTodo: function() {
            var addTodoTextInput= document.getElementById("addTodoTextInput");
            todoList.addTodo(addTodoTextInput.value);
            addTodoTextInput.value= "";
            },
            changeTodo: function(){
                var changeTodoPositionInput= document.getElementById("changeTodoPositionInput");
                var changeTodoTextInput = document.getElementById("changeTodoTextInput");
                todoList.changeTodo(changeTodoPositionInput.valueAsNumber, changeTodoTextInput.value);
                changeTodoPositionInput.value= "";
                changeTodoTextInput.value = "";
            },
            deleteTodo: function(){
                var deleteTodoPositonInput = document.getElementById("deleteTodoPositionInput");
                todoList.deleteTodo(deleteTodoPositionInput.valueAsNumber);
                deleteTodoPositionInput.value= "";
            },

//below is the code in question

toggleCompleted: function(){
                var toggleCompletedPositionInput = document.getElementById("toggleCompletedPositionInput");
                todoList.toggleCompleted(toggleCompletedPositionInput.valueAsNumber);
                toggleCompletedPositonInput.value = "";
            },
            };


                var view = {
                displayTodos: function(){
                var todosUl = document.querySelector("ul");
                todosUl.innerHTML = '';
                for (var i = 0; i < todoList.todos.length; i++){
                var todoLi = document.createElement("li");
                var todo = todoList.todos[i];
                var todoTextWithCompletion = "";

                if (todo.completed === true){
                    todoTextWithCompletion = '(x)' + todo.todoText;
                }else{
                    todoTextWithCompletion = '( )' + todo.todoText;
                }

                todoLi.textContent = todoTextWithCompletion;
                todosUl.appendChild(todoLi);

                    }
                }
            };
</script>

Answer 1

В этой строке i отсутствует:

toggleCompletedPositonInput.value = "";

Должно быть:

toggleCompletedPositionInput.value = "";