1

当我运行我的 PLNKR 控制台以测试 UI 上的按钮时，我收到一个参考错误，即“处理程序”未定义。我不明白，我确实在我的 JS 帖子中定义了它。

参考这个网址；我正在练习 Gordon Zhu 的“实用 JS”课程，我在第 8 版

https://watchandcode.com/courses/60264/lectures/1027557

~4:00 分钟标记

JS

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;

    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 = '';

  }
};

HTML

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <h1>Todo List</h1>

    <div>
      <button onclick="handlers.displayTodos()">Display Todos</button>
      <button onclick="handlers.toggleAll()">Toggle All</button>
    </div>

    <div>
      <button onclick="handlers.addTodo()">Add</button>
      <input id="addTodoTextInput" type="text">
      </div>

      <div>
        <button onclick="handlers.changeTodo()">ChangeTodo</button>
        <input id="changeTodoPositionInput" type="number">
        <input id="changeTodoTextInput" type="text">
      </div>

      <script src="script.js"></script>
  </body>

  </html>
4

1 回答 1

-1

我认为这是因为您在它出现在 HTML 代码中之后定义处理程序，所以在 onclick 尝试注册它时，它还不存在

于 2019-11-16T23:31:26.880 回答