javascript - 出现错误“无法读取 null 的属性‘push’”
问题描述
我正在做一个关于 JS 的进修课程只是为了好玩,我遇到了一个错误。据我所知,我正在做教练正在做的事情,但我无法让它发挥作用!下面是我的 JS,附件是我的 codepen。我尝试使用控制台日志进行调试,一切似乎都是正确的,但仍然出现错误。
//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
我想这很简单,但我就是想不通。
解决方案
您可以检查您的todo
变量是否实际上是一个数组,例如:
if (Array.isArray(todos)) {
todos.push(todo);
}
推荐阅读
- django - 将项目附加到 wagtail 中的流场
- python - Python Regex 问题将文件系统名称转换为指数
- c# - BadHttpRequestException:由于数据到达太慢,读取请求正文超时。请参阅 ASP.NET 核心 2.2 上的 MinRequestBodyDataRate
- c - 在 C 中使用 while 循环检查两个不同的用户名和密码组合
- google-play - 使用 Azure Pipelines 更新 Play 商店中的私有应用程序
- c - 简单的 C 程序无法编译 - 错误是“动态主可执行文件必须与架构 i386 的 libSystem.dylib 链接”
- sql - Postgresql 特殊序列,取决于之前的值
- visual-studio-code - 在 Visual Studio Code 中聚焦组时如何禁用调整大小?
- java - Aws Push 通知在某个时间后停止并且工作开始重新启动 tomcat
- excel - 在 Powershell 中编写 Excel 文件并在公式中使用等号