javascript - Uncaught ReferenceError : elementChecked is not defined

Question

我是 Javascript 的新手，在构建待办事项列表时遇到了问题。我正在尝试添加一个复选框，该复选框会将 #id 推送到 handlers.toggleCompleted，然后将项目标记为已完成。

我能够正确运行 if 语句

if (elementChecked.childNodes[3].checked) {
          console.log(elementClicked.parentNode.id);

但是我在这里得到了 Uncaught ReferenceError

if (elementChecked.childNodes[3].checked) {
          handlers.toggleCompleted(elementChecked.parentNode.id);

这是完整的代码，抱歉，如果这不是一个好问题，我仍在学习这门语言。

let todoList = {
    todos: [],
    addTodo: function(todoText) {
      this.todos.push({
        todoText: todoText,
        completed: false
      });
    },
    changeTodo: function(position, todoText) {
      this.todos[position].todoText = todoText;
    },
    deleteTodo: function(position) {
      this.todos.splice(position, 1);
    },
    toggleCompleted: function(position) {
      let todo = this.todos[position];
      todo.completed = elementChecked.childNodes[3].checked;
    },
    toggleAll: function() {
      let totalTodos = this.todos.length;
      let completedTodos = 0;

      // Get number of completed todos.
      this.todos.forEach(function(todo) {
        if (todo.completed === true) {
          completedTodos++;
        }
      });

      this.todos.forEach(function(todo) {
        //case 1: if everything is true make everything flase
        if (completedTodos === totalTodos) {
          todo.completed = false;
        } else {
          //case 2: if everything is false make everything true
          todo.completed = true;
        }
      });
    }
  };

  let handlers = {
    addTodo: function() {
      let addTodoTextInput = document.getElementById('addTodoTextInput');
      todoList.addTodo(addTodoTextInput.value);
      addTodoTextInput.value = '';
      view.displayTodos();
    },
    changeTodo: function(position, todoText){
        todoList.changeTodo(position, todoText);
      view.displayTodos();
    },
    deleteTodo: function(position) {
      todoList.deleteTodo(position);
      view.displayTodos();
    },
    toggleCompleted: function(position) {
      todoList.toggleCompleted(position);
      view.displayTodos();
    },
    toggleAll: function() {
      todoList.toggleAll();
      view.displayTodos();
    }
  };

  let view = {
    displayTodos: function() {
      let todosUl = document.querySelector('ul');
      todosUl.innerHTML = '';
      todoList.todos.forEach(function(todo, position) {
        let todoLi = document.createElement('li');
        let todoTextWithCompletion = '';

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

        todoLi.id = position;
        todoLi.textContent = todoTextWithCompletion;
        todoLi.appendChild(this.createDeleteButton());
        todoLi.appendChild(this.createChangeButton());
        todoLi.appendChild(this.createCompleteButton());



        todosUl.appendChild(todoLi);
      }, this);
    },
    createDeleteButton: function() {
      let deleteButton = document.createElement('button');
      deleteButton.textContent = 'Delete';
      deleteButton.className = 'deleteButton';
      return deleteButton;
    },
    createChangeButton: function() {
      let changeButton = document.createElement('button');
      changeButton.textContent = 'Change';
      changeButton.className = 'changeButton';
      return changeButton;
    },
    createCompleteButton: function() {
      let completeButton = document.createElement('input');
      completeButton.setAttribute("type", "checkbox");
      completeButton.className = 'todoComplete';
      return completeButton;
    },
    setUpEventListeners: function() {
      let todosUl = document.querySelector('ul');
      todosUl.addEventListener('click', function(event) {
        let elementClicked = event.target;
        let elementChecked = document.getElementById(parseInt(elementClicked.parentNode.id));
        if (elementClicked.className === 'deleteButton') {
          handlers.deleteTodo(parseInt(elementClicked.parentNode.id));
        }
        if (elementClicked.className === 'changeButton') {
          let selectedTodoText = parseInt(elementClicked.parentNode.id);
          let changedTextValue = prompt("Please enter new text:", selectedTodoText);
          handlers.changeTodo(selectedTodoText, changedTextValue);
        }
        if (elementChecked.childNodes[3].checked) {
          handlers.toggleCompleted(elementClicked.parentNode.id);
          console.log(elementClicked.parentNode.id);
        } else {
          elementChecked.style.background = 'transparent';
        }
      });
    }
  };
  view.setUpEventListeners();

Answer 1

弄清楚(有点)是因为它没有在 todoList.toggleCompleted 范围内定义。