微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

无法筛选待办事项清单

如何解决无法筛选待办事项清单

想要在女巫中编写代码,然后将任务添加到待办事项列表,一切都很好,直到我想添加过滤器,并且当我单击select元素上的optionts时,它显示以下内容

^(?:[6-9]|[1-9]\d+)$

我试图解决这个问题大约4天,但没有成功,我什至重新审视了作者的代码(即按照教程进行操作,我遵循了编写它的人的所有步骤,但是,这个家伙的代码没有问题) 我要在这里添加整个代码

我遇到问题的函数名称是filterTodo

apps.js:57 Uncaught TypeError: Cannot set property 'display' of undefined
    at apps.js:57
    at NodeList.forEach (<anonymous>)
    at HTMLSelectElement.filterTodo (apps.js:54)
const todoInput = document.querySelector(".todo-input");
const todobutton = document.querySelector(".todo-button");
const todoList = document.querySelector(".todo-list");
const filterOption = document.querySelector(".filter-todo");

todobutton.addEventListener("click",addTodo);
todoList.addEventListener("click",deleteCheck);
filterOption.addEventListener("click",filterTodo);

function addTodo(event){
  //prevenir que haga submit
  event.preventDefault();
  //hacer div
  const todoDiv = document.createElement("div");
  todoDiv.classList.add("todo");
  const newTodo = document.createElement('li');
  newTodo.innerText = todoInput.value;
  newTodo.classList.add('todo-item');
  todoDiv.appendChild(newTodo);
  //check button
  const completedButton = document.createElement('button');
  completedButton.innerHTML = '<i class = "fas fa-check"></i>'
  completedButton.classList.add("checkbtn");
  todoDiv.appendChild(completedButton);
  //del button
  const trashButton = document.createElement('button');
  trashButton.innerHTML = '<i class = "fas fa-trash"></i>'
  trashButton.classList.add("trashbtn");
  todoDiv.appendChild(trashButton);

  todoList.appendChild(todoDiv);
  todoInput.value = "";
}

function deleteCheck(e){
  const item = e.target;
  //Delete
  if (item.classList[0] === 'trashbtn'){
    const todo = item.parentElement;
    todo.classList.add('fall');
    todo.addEventListener('transitionend',function(){
    todo.remove();
    })
  }

  if (item.classList[0] === 'checkbtn'){
    const todo = item.parentElement;
    todo.classList.toggle('completed');
  }
}

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

解决方法

Node.childNodes为您提供实时的节点列表

您要寻找的是儿童财产

function filterTodo(e) {
   const todos = Array.from(todoList.children);

   if (!todos) return;

...
}

todos变量存储div.todo-list元素的所有子元素,该元素返回HTMLCollectionHTMLCollection没有forEach方法,因此我不得不使用Array.from()

将其转换为数组

然后我问一个简单的问题,

如果parentNode中没有子节点,则退出该函数

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。