待办事项列表下拉列表不工作javascript

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

TypeError:无法读取null的属性“childNodes”

我不确定下拉列表，即filterTodo代码的逻辑是否正确。请建议如何修复我的下拉菜单

我的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";
        }
    }
  });
}

var input=document.querySelector（'.todo_input'）；
var MainTodoContainer=document.getElementById（'todos'））
var addingButton=document.querySelector（'.additem'）；
var deleteAllBtn=document.querySelector（'.deleteBtn'）；
var completedButton=document.querySelector（'.completed'）；
var removeButton=document.querySelector（'.trash'）；
常量过滤器选项=document.querySelector（“.filter todo”）；
filterOption.addEventListener（“单击”，filterTodo）；
addingButton.addEventListener（'click'，函数（e）{
/*停止按钮行为*/
e、 预防默认值（）；
/*创建所有元素*/
if（input.value.trim（））{
/*UL标签*/
var ulTag=document.createElement（'ul'）；
ulTag.classList.add（'todo-list-container'）；
/*待办事项列表组*/
var todoList=document.createElement（'div'）；
todoList.classList.add（'todo-list'）；
/*李泰格*/
var liTag=document.createElement（'li'）；
liTag.innerText=input.value；
liTag.classList.add（'todo-item'）；
/*按钮Div*/
var buttonDiv=document.createElement（'div'）；
buttonDiv.classList.add（'button'）；
/*完整的按钮元件1*/
var completeButton=document.createElement（'button'）；
completeButton.classList.add（'completed'）；
completeButton.innerHTML=''；
/*编辑按钮*/
var editBtn=document.createElement（'button'）；
editBtn.innerHTML=''；
editBtn.classList.add（'editBtn'）；
editBtn.onclick=函数（）{
编辑工作（liTag）；
}
/*垃圾箱按钮元件2*/
var trashButton=document.createElement（'button'）；
trashButton.classList.add（'trash'）；
trashButton.innerHTML=''；
/*将元素相互追加*/
ulTag.appendChild（托多利斯特）；
托多利斯特儿童（利塔格）；
todoList.appendChild（buttonDiv）；
按钮IV.追加子项（完成按钮）；
按钮附件子项（editBtn）；
按钮附件（垃圾按钮）；
/*如果输入为空，则不要在DOM中显示空列表*/
MainTodoContainer.appendChild（ulTag）；
/*会话存储*/
/*单击“添加”按钮后，清除输入值*/
input.value=''；
/*完成和回收按钮工作*/
todoList.addEventListener（'click'，函数（e）{
var项目=e.目标；
if（items.classList[0]=“已完成”）{
var todo=items.parentElement；
var todo2=todo.parentElement；
todo2.classList.add（'line\u-to'）
}
else if（items.classList[0]=“垃圾箱”）{
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（函数（）{
document.getElementById（“pi”）.innerHTML=''；
}, 3000);
}
});
功能编辑工作（e）{
var editValue=prompt（'edit the select item'，e.firstChild.nodeValue）；
e、 firstChild.nodeValue=editValue；
}
函数删除等位基因（）{
var gettingUlTag=document.querySelectorAll（'.todo列表容器'）；
for（var i=0；i

出现此错误是因为您试图使用

document.querySelector（“.todo list”）

获取DOM中不存在的元素的子节点

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

const todos=todoList？todoList.childNodes:[]；