为什么我会在控制台中收到有关有效功能的错误消息？

Question

所以，我在 JavaScript 代码中遇到了一个我似乎无法弄清楚的问题。我一直在做一个教程，一切都很顺利，直到我在控制台中收到一条关于未定义但尽管它按预期工作的方法的错误消息。我将在 JS 代码上方粘贴有问题的 HTML 的 div。我想知道为什么浏览器会给我这个错误。

tod​​oList.html:134 Uncaught ReferenceError: toggleCompletedPositonInput 未定义 在 Object.toggleCompleted (todoList.html:134) 在 HTMLButtonElement.onclick (todoList.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 = "";