待办事项列表的下拉列表无法使用javascript

Question

我想创建一个下拉列表来分隔已完成和未完成的任务，但我遇到了一个错误：

TypeError:无法读取空的属性"childNodes">

我不确定下拉列表，即filterTodo代码的逻辑是否正确。请建议我如何使下拉列表工作。

Js我的代码报价：

我的Javascript代码：

var input = document.querySelector('.todo_input');
var MainTodoContainer = document.getElementById('todos')
var addingButton = document.querySelector('.add-item');
var deleteAllBtn = document.querySelector('.deleteBtn');
var completedButton = document.querySelector('.completed');
var removeButton = document.querySelector('.trash');
const filterOption = document.querySelector(".filter-todo");
filterOption.addEventListener("click", filterTodo);
addingButton.addEventListener('click', function(e){
/* stoping button behaviour */
e.preventDefault();

/* Create all the elements */
if(input.value.trim()){
/* UL Tag */
var ulTag = document.createElement('ul');
ulTag.classList.add('todo-list-container');
/* Todo list div */
var todoList = document.createElement('div');
todoList.classList.add('todo-list');
/* LI Tag */
var liTag = document.createElement('li');
liTag.innerText = input.value;
liTag.classList.add('todo-item');
/* Button Div */
var buttonDiv = document.createElement('div');
buttonDiv.classList.add('button');
/* completed button element1 */
var completeButton = document.createElement('button');
completeButton.classList.add('completed');
completeButton.innerHTML = '<i class="fas fa-check"></i>';
/* Edit Button */
var editBtn = document.createElement('button');
editBtn.innerHTML = '<i class="far fa-edit"></i>';
editBtn.classList.add('editBtn');
editBtn.onclick = function(){
editWorking(liTag);
}
/* trash button element2 */
var trashButton = document.createElement('button');
trashButton.classList.add('trash');
trashButton.innerHTML = '<i class="fas fa-trash"></i>';

/* Appending Elements into each other */
ulTag.appendChild(todoList);
todoList.appendChild(liTag);
todoList.appendChild(buttonDiv);
buttonDiv.appendChild(completeButton);
buttonDiv.appendChild(editBtn);
buttonDiv.appendChild(trashButton);

/* if input is empty then don't display empty list in DOM */
MainTodoContainer.appendChild(ulTag);
/* sessionStorage */
/* when the add button click clear the input value */
input.value = '';
/* complete and trash button working */
todoList.addEventListener('click', function(e){
var items = e.target;
if(items.classList[0] === 'completed'){
var todo = items.parentElement;
var todo2 = todo.parentElement;
todo2.classList.add('line_through')
}
else if(items.classList[0] === 'trash'){
var todo = items.parentElement;
var todo2 = todo.parentElement;
todo2.classList.add('fall');
todo2.addEventListener('transitionend', function(){
var todo3 = todo2.parentElement;
todo3.remove();
});
}
});
}else if(input.value === ''){

document.getElementById("pi").style.display = "block";
document.getElementById("pi").innerHTML = "plisss";
setTimeout(function(){
document.getElementById("pi").innerHTML = '';
}, 3000);
}
});

function editWorking(e){
var editValue = prompt('edit the select item', e.firstChild.nodeValue);
e.firstChild.nodeValue = editValue;
}
function deleteAllElements(){
var gettingUlTag = document.querySelectorAll('.todo-list-container');
for(var i = 0; i < gettingUlTag.length; i++){
gettingUlTag[i].remove();
}
input.value = '';
}
function filterTodo(e) {
const todoList = document.querySelector(".todo-list");
const todos = todoList.childNodes;
var todo = input;
todos.forEach(function(todo) {
switch (e.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";
}
}
});
}

Answer 1

您之所以出现此错误，是因为您试图获取一个元素的子节点，而该元素在具有document.querySelector(".todo-list")的DOM上不存在。

在使用之前检查它是否存在将解决您的问题。

const todos = todoList ? todoList.childNodes : [];