Блог

Главная - Вопросы по программированию - Невозможно выполнить фильтрацию по списку дел

Невозможно выполнить фильтрацию по списку дел

#javascript #html #web #dom #addeventlistener

#javascript #HTML #веб #dom #addeventlistener

Вопрос:

привязка к написанию кода в witch, когда вы добавляете задачу в список дел, все хорошо, пока я не захочу добавить файл, и когда я нажимаю опции на элементе выбора, он показывает следующее:

 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)

я пытаюсь решить эту проблему примерно 4 дня, но безуспешно, я даже пересмотрел код от автора (я следую руководству, и я следил за каждым шагом точно так же, как парень, который его написал, однако у парня нет проблем с кодом)
я собираюсь добавить сюда весь код

имя функции, с которой у меня возникли проблемы, — filterTodo

 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";
        }
    }
  });
}  
 <body>
  <header>
    <h1>To-Do List</h1>
  </header>
  <form>
    <input type="text" class ="todo-input">
    <button class="todo-button" type="submit">
      <i class="fas fa-plus-square"></i>
    </button>
    <div class="select">
      <select name="todos" class="filter-todo"  >
        <option value="all">All</option>
        <option value="completed">Completed</option>
        <option value="uncompleted">Uncompleted</option>
      </select>
    </div>
  </form>
  <div class="todo-container">
    <ul class="todo-list">

    </ul>

  </div>
  <script src="apps.js"></script>
</body>
enter code here

Ответ №1:

Node.childNodes предоставляет вам живой список узлов

То, что вы искали, было свойством дочерних элементов

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

   if (!todos) return;

...
}

Переменная todos хранит все дочерние элементы элемента div.todo-list, который возвращает a HTMLCollection . У An HTMLCollection нет метода forEach, поэтому мне пришлось преобразовать его в массив с помощью Array.from()

Тогда я задаю простой вопрос,

Если в родительском узле нет дочерних элементов, выйдите из функции

Комментарии:

1. Вот статьи для исследования дочерних элементов конструктора узла и дочернего узла