如何解决无法筛选待办事项清单
想要在女巫中编写代码,然后将任务添加到待办事项列表,一切都很好,直到我想添加过滤器,并且当我单击select元素上的optionts时,它显示以下内容:
^(?:[6-9]|[1-9]\d+)$
我试图解决这个问题大约4天,但没有成功,我什至重新审视了作者的代码(即按照教程进行操作,我遵循了编写它的人的所有步骤,但是,这个家伙的代码没有问题) 我要在这里添加整个代码
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元素的所有子元素,该元素返回HTMLCollection
。 HTMLCollection
没有forEach方法,因此我不得不使用Array.from()
然后我问一个简单的问题,
如果parentNode中没有子节点,则退出该函数
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。