javascript - 错误：无法设置 undefined/a /at NodeList.forEach)/at HTMLSelectElement.filterTodo 的属性“显示”

Question

错误：

 1. script.js:153 Uncaught TypeError: Cannot set property 'display' of
    undefined
        at script.js:153
        at NodeList.forEach (<anonymous>)
        at HTMLSelectElement.filterTodo (script.js:150)

代码：

enter code here function filterTodo(e) {
let todos = todoList.childNodes;
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

When you are selecting let todos = todoList.childNodes; make sure there is not any space between todoList element. for example:

var todoList = document.querySelector(".todo-list");

Correct:

<ul class="todo-list"></ul>

Error:

<ul class="todo-list>

</ul>

Answer 2

您可能应该检查todos包含的内容。你尝试分配undefined.style.display = 'something'

Answer 3

你可以在 todos 中有非元素，

childNodes 包括所有子节点——包括非元素节点，如文本和评论节点。要获取仅包含元素的集合，请改用 ParentNode.children。来自https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes