Question

我的代码运行良好，直到我尝试向li附加按钮以完成切换。我采用了与删除todo li子按钮（有效）相同的方法，但是切换不起作用。实际上，这引起了更多问题。

我试图以许多不同的方式重写代码。我已经无济于事地运行调试器。香港专业教育学院重新阅读每一行。

var 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) {    
    var todo = this.todos[position];    
    todo.completed=!todo.completed;    
  },    
  toggleAll: function() {    
   var totalTodos = this.todos.length;    
    var completedTodos = 0;     
   this.todos.forEach (function(todo) {    
   if (todo.completed===true) {    
    completedTodos++       
}    
   });    
    this.todos.forEach (function(todo) {    
    if (completedTodos===totalTodos) {    
    todo.completed= false    
      } else {    
      todo.completed= true    
      }    
    });    
  }    
};    

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

var view = {    
  displayTodos: function() {    
    var todosUl = document.querySelector('ul');    
    todosUl.innerHTML = '';    
    todoList.todos.forEach (function(todo, position) {    
      var todoLi = document.createElement('li');    
      var todoTextWithCompletion = '';    
      if (todoList.todos[position].completed === true) {    
        todoTextWithCompletion = '(x) ' + todo.todoText;    
      } else {    
        todoTextWithCompletion = '( ) ' + todo.todoText;    
        todoLi.id = position;    
      todoLi.textContent = todoTextWithCompletion;    
      todoLi.appendChild (this.createDeleteButton());    
      todoLi.appendChild (this.createToggleCompletedButton());    
          todosUl.appendChild(todoLi);    
      }    
    }, this);    
  },    
  createDeleteButton: function () {    
  var deleteButton= document.createElement ('button');    
    deleteButton.textContent= 'Delete';    
    deleteButton.className= 'deleteButton';    
    return deleteButton;    
  },    
  createToggleCompletedButton: function () {    
  var toggleButton= document.createElement ('button');    
    toggleButton.textContent= 'Mark';    
    toggleButton.className= 'toggleButton';     
    return toggleButton;    
  },    
  setUpEventListeners: function () {    
var todosUl= document.querySelector ('ul');    
todosUl.addEventListener ('click', function(event) {    
var elementClicked= event.target;    
  if (elementClicked.className=== 'deleteButton') {    
  handlers.deleteTodo(parseInt(elementClicked.parentNode.id));    
      } else if (elementClicked.className=== 'toggleButton'){    
      handlers.toggleCompleted(parseInt(elementClicked.parentNode.id));     
      };     
    });    
  }      
};    
view.setUpEventListeners();

当单击“标记”按钮时，toggleCompleted应该发生，导致（）TodoText或（x）TodoText应该显示在ul上（取决于布尔值）。但是，没有任何反应。即使在控制台中，toggleCompleted和toggleAll均不起作用。当我运行调试器时，它表明许多已定义的变量显示为未定义，并带有错误（包括todoList）；所有其他功能都可以使用，而不管未定义的问题（这也很奇怪）。

Answer 1

我认为问题在于，只要完成标志设置为true，您实际上就不会渲染todo元素，而只是将其跳过。您必须这样做：

todoList.todos.forEach(function(todo, position) {    
  var todoLi = document.createElement('li');    
  var todoTextWithCompletion = '';  
  if (todoList.todos[position].completed === true) {
    todoTextWithCompletion = "(x) " + todo.todoText;
  } else {
    todoTextWithCompletion = "( ) " + todo.todoText;

  } // <---- insert closing parenthesis here ...

  todoLi.id = position;
  todoLi.textContent = todoTextWithCompletion;
  todoLi.appendChild(this.createDeleteButton());
  todoLi.appendChild(this.createToggleCompletedButton());
  todosUl.appendChild(todoLi);

  // } <---- instead of here

}, this);

附加li child（按钮）后功能停止工作

1 个答案: