Question

我一直在我的hyperDev帐户上运行此代码，它似乎工作得很好。然后我将它转移到我的Dreamweaver cc，它显示了一个错误：未捕获的TypeError：无法读取null的属性“addEventListener” at Object.setUpEventListeners（todoList.js：137）在todoList.js：151

不确定我做错了什么。我试图修改它工作，但我似乎无法让它运行正确。

非常感谢任何帮助。感谢

我的代码在下面：JAVASCRIPT

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);

  },

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

      todoList.addTodo(addTodoText.value);

      addTodoText.value = "";
      view.displayTodos();
  },

  changeTodo: function(){
    var changeTodoPosition = document.getElementById('changeTodoPosition');
    var changeTodoText = document.getElementById('changeTodoText');

      todoList.changeTodo(changeTodoPosition.valueAsNumber, changeTodoText.value);
      changeTodoPosition.value = "";
      changeTodoText.value = "";
      view.displayTodos();

  },

  deleteTodo: function(position){
    // var deleteTodoPosition = document.getElementById('deleteTodoPosition');

      todoList.deleteTodo(position);
      // deleteTodoPosition.value = "";
      view.displayTodos();
  },

  toggleComplete: function(position){
    // var toggleCompetePosition = document.getElementById('toggleCompletePosition');

      todoList.toggleComplete(position);
      // toggleCompletePosition.value = "";
      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(todo.completed === true){
                todoTextWithCompletion = '(x) ' + todo.todoText;
              } else {
                todoTextWithCompletion = '( ) ' + todo.todoText;
              }

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

          }, this);

  },

  createDeleteButton: function(){
    var deleteButton = document.createElement('button');

        deleteButton.textContent = 'Delete';
        deleteButton.className = 'deleteButton';

          return deleteButton;

  },

  createCompleteButton: function(){
    var completeButton = document.createElement('button');

        completeButton.textContent = 'Complete';
        completeButton.className = 'completeButton';

          return completeButton;
  },
  setUpEventListeners: function(event){

        var todosUl = document.querySelector('ul');

      todosUl.addEventListener('click', function(event){
        var completeClicked = event.target;
        var deleteClicked = event.target;


          if(deleteClicked.className === 'deleteButton'){
            handlers.deleteTodo(parseInt(deleteClicked.parentNode.id));
        } else if(completeClicked.className === 'completeButton'){
            handlers.toggleComplete(parseInt(completeClicked.parentNode.id));
        }
      });
  }
  };

view.setUpEventListeners();



HERE IS MY HTML FORMAT:

<script src="todoList.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <title>Practical Todos</title>
    <link id="favicon" rel="icon" href="https://hyperdev.com/favicon.ico" type="image/x-icon">
  </head>
  <body>
    <h1>todoList.soloRun12.29/16</h1>

    <div>
      <button onclick="handlers.addTodo()">Add</button>
      <input id='addTodoText' type='text'>
    </div>
    <div>
      <button onclick='handlers.changeTodo()'>Change Todo</button>
      <input id='changeTodoPosition' type='number'>
      <input id='changeTodoText' type='text'>
    </div>

    <div>
      <button onclick='handlers.toggleAll()'>Toggle All</button>
    </div>

    <ul>

    </ul>

     <!-- <script src="/client.js"></script> -->
  </body>
</html>

todo-list边项目javascript

0 个答案: