tying to write a code in witch you add task to a to- do list, everything good until i want to add a filte and when i click the optionts on the select element it shows the following:
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)
im trying to solve this for like 4 days, but had no success at it, i even revisited the code from the author (im following a tutorial and i've followed every step exactly like the guy who wrote it, however, the guy has no problem with the code) im gonna add the whole code here
the name of the function im having trouble with is 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
Aucun commentaire:
Enregistrer un commentaire