Question

我正在上一门关于 JS 的进修课程只是为了好玩，但我遇到了一个错误。据我所知，我正在做讲师正在做的事情，但我无法让它发挥作用！下面是我的 JS，附上我的代码笔。我尝试使用控制台日志进行调试，一切似乎都是正确的，但仍然出现错误。

//Selectors
const todoInput = document.querySelector('.todo-input');
const todoList = document.querySelector('.todo-list');
const todoButton = document.querySelector('.todo-button');
const filterOption = document.querySelector('.filter-todo')

//Event Listeners
todoButton.addEventListener('click', addTodo);
todoList.addEventListener('click', deleteCheck)
filterOption.addEventListener('change', filterTodo)

//Functions
function addTodo(event){
    event.preventDefault()

    const todoDiv = document.createElement("div")
    todoDiv.classList.add("todo")
    //create li and buttons
    const newTodo = document.createElement('li')
    const todoDelete = document.createElement('button')
    const todoDone = document.createElement('button')

    //add classes to li and buttons
    newTodo.classList.add("todo-item")
    todoDelete.innerHTML = '<i class="fas fa-trash"> <i>'
    todoDelete.classList.add('delete-btn')
    todoDone.innerHTML = '<i class="fas fa-check-square"> <i>'
    todoDone.classList.add('complete-btn')



    //add li to todoDiv
    todoDiv.appendChild(newTodo)
    todoDiv.appendChild(todoDone)
    todoDiv.appendChild(todoDelete)

    //add text to li
    newTodo.innerText = todoInput.value

    todoList.appendChild(todoDiv)

    //save todo
    saveLocalTodos(todoInput.value);
    

    //Clear input
    todoInput.value = ""   
}

function deleteCheck(event){
    const item = event.target;

    if (item.classList[0] === "delete-btn"){
        const todoItem = item.parentElement;
        //Animation
        todoItem.classList.add('fall')
        todoItem.addEventListener('transitionend', function(){
            todoItem.remove();
        })

    }
    if (item.classList[0] === "complete-btn"){
        const todoItem = item.parentElement;
        todoItem.classList.toggle('completed');
    }
}

function filterTodo(event){
    const todos = todoList.childNodes;
    todos.forEach(function(todo){
        console.log(event)
        switch(event.target.value){
            case "all":
                todo.style.display = 'flex';
                break;
            case "completed":
                if(todo.classList.contains('completed')){
                    todo.style.display = 'flex';
                }
                else{
                    todo.style.display = 'none';
                }
                break;
            case "uncompleted":
                if(!todo.classList.contains('completed')){
                    todo.style.display = 'flex';
                }
                else{
                    todo.style.display = 'none';
                }
                break;
        }
    });
    
}

function saveLocalTodos(todo){
    let todos;
    if (localStorage.getItem("todos" === null)){
        todos = [];
    }else{
        todos = JSON.parse(localStorage.getItem('todos'));
    }
    console.log(todos)
    todos.push(todo);
    localStorage.setItem('todos', JSON.stringify(todos));
}

https://codepen.io/WisChrendel/pen/VwmajjB?editors=1111

我想这很简单，但我就是想不通。

Answer 1

您可以检查您的 todo 变量是否实际上是一个数组，例如：

if (Array.isArray(todos)) {
  todos.push(todo);
}

出现错误“无法读取 null 的属性‘push’”

1 个答案: