Javascript：“单击”按钮在按下时不起作用？

Question

I'm in practical JS by Gordon Zhu (wwww.watchandcode.com). I don't understand why the buttons appear in the browser/UI/client side, but for some reason, when I go to click it the button makes an animation and does nothing. You know, kind of like one of those old, old software programs some companies and job boards use.

I'm getting an

VM3950:1 Uncaught ReferenceError: todoList is not defined at:1:1

when defining todoList by displayTodos.addTodo('first');

  
  
  
 
   
 
    
       

        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 displayTodosButton = document.getElementById('displayTodosButton');

displayTodosButton.addEventListener('click', function() {
  todoList.displayTodos();
});
 
    
              <h1>Todo List</h1>
            
            <button id = "displayTodosButton">Display Todos</button>
            <button id = "toggleAllButton">Toggle All</button>
 
   
 
  

Answer 1

this keyword works different in Javascript compared in other languages, this is determined by how a function is called (runtime binding). In your handlers you may called todoList.displayTodos() or you can also update to use arrow functions, because in arrow functions, this retains the value of the enclosing lexical context's this see your code below:

 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 displayTodosButton = document.getElementById('displayTodosButton'); var toggleAllButton = document.getElementById('toggleAllButton'), displayTodosButton.addEventListener('click'. () => { this;todoList;displayTodos(). }), toggleAllButton.addEventListener('click'. () => { this;todoList;toggleAll(); });

 <h1>Todo List</h1> <button id = "displayTodosButton">Display Todos</button> <button id = "toggleAllButton">Toggle All</button>

Answer 2

The error display is: Uncaught ReferenceError: todoList is not defined Which means exactly that when referencing the todoList object from the this context it won't be defined because the this here is your html element not the window object thus if you want to refer to your object you have to remove the this keyword that's all (The javascript this keyword has a different behavior from many other languages). Finally if you want to read more about the this behavior in java-script you can visit: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this