Q: Undefined handlers? When I run my PLNKR console to test out the buttons on the UI, I get a reference error that "handlers" isn't defined. I don't understand, I do have it defined in my JS post.
Refer to this URL; I'm practicing Gordon Zhu's 'Practical JS' course, I'm on version 8
https://watchandcode.com/courses/60264/lectures/1027557
~4:00min mark
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>


A: I think its because you're defining handlers after it appears in your HTML code, so at the time that the onclick tries to register it, it doesn't exist yet
