完成和未完成的待办事项

时间：2020-10-21 18:46:40

标签： javascript html css 

//selectors

const todoInput = document.querySelector('.todo-input');
const todoButton = document.querySelector('.todo-button');
const todoList = document.querySelector('.todo-list');
const filterOption = document.querySelector('.filter-todo');
//event listeners
todoButton.addEventListener("click", addTodo);
todoList.addEventListener('click', deleteCheck);
filterOption.addEventListener('click', filterTodo);

//funtions
function addTodo(event) {

    //prevent form from submiting
    event.preventDefault();


/// todo div

const todoDiv = document.createElement("div");
todoDiv.classList.add("todo");

//create li
const newTodo = document.createElement('li');
newTodo.innerText = todoInput.value;
newTodo.classList.add('todo-item');
todoDiv.appendChild(newTodo);

//check mark button
const completedButton = document.createElement('button');
completedButton.innerHTML= '<i class="fas fa-check"></i>';
completedButton.classList.add("complete-btn");
todoDiv.appendChild(completedButton);
//check trash button
const trashButton = document.createElement('button');
trashButton.innerHTML= '<i class="fas fa-trash"></i>';
trashButton.classList.add("trash-btn");
todoDiv.appendChild(trashButton);

//append to list
todoList.appendChild(todoDiv);

//clear todoinput value
todoInput.value="";


}

function deleteCheck(e){
    const item = e.target;
    //delete todo
    if(item.classList[0] === 'trash-btn'){
      const todo = item.parentElement;

      //animation
      todo.classList.add("fall");
      todo.addEventListener("transitionend", function(){
        todo.remove();
      });


     
    }

    //check mark
  if (item.classList[0] === "complete-btn") {
      const todo =  item.parentElement;
      todo.classList.toggle("completed");
  }
    
}

function filterTodo(e) {
    const todos = [...todoList.children];
    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";
                    }
                    case "uncompleted":
                        if(!todo.classList.contains("completed")) {
                            todo.style.display = "flex";
                        } else {
                            todo.style.display = "none";
                        }
                   
        }
    });

}
* {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    color: white;
    min-height: 100vh;
    background-image: linear-gradient(120deg, #f6d365, #fda085);
}
header{
    font-size: 1.5rem;

}

header,form{
    min-height: 20vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

form input, form button{
    padding: 0.5rem;
    font-size: 2rem;
    border: none;
    background: white;

}

form button{
    color: #d88771;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;

}
form button:hover{
    background: #d88771;
    color: white;
}

.todo-container{
    display: flex;
    justify-content: center;
    align-items: center;

}
.todo-list{
    min-width: 30%;
    list-style: none;

}
.todo {
    margin: 0.5rem;
    background: white;
    color: black;
    font-size: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.5s ease;
    
}
.todo li{
    flex: 1;
}
.trash-btn, .complete-btn{
    background: #ff6f47;
    color: white;
    padding: 1rem;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}


.complete-btn{
    background: rgb(73,204,73);
}
.todo-item{
    padding: 0rem 0.5rem;
}
.fa-trash, .fa-check{
    pointer-events: none;;
}

.completed{
    text-decoration: line-through;
    opacity: 0.5;
}
.fall{
    transform: translateY(8rem) rotateZ(20deg);
    opacity: 0;
}

select{
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   outline: none;
   border: none;
}

.select{
    margin: 1rem;
    position: relative;
    overflow: hidden;

}
select{
    color: #ff6f47;
    width: 10rem;
    cursor: pointer;
    padding: 1rem;
}
.select::after{
    content: "\25BC";
    position: absolute;
    background: #ff6f47;
    top: 0;
    right: 0;
    padding: 1rem;
    pointer-events: none;
    transition: all 0.3s ease;
}

.select:hover::after{
    background: white;
    color: #ff6f47;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;800&amp;display=swap" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To do list</title>
</head>
<body>
   <header>
       <h1>Yours todos</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="app.js"></script>
</body>
</html>

当我使用带有完成且所有弹出菜单的菜单时：

Uncaught TypeError: Cannot set property 'display' of undefined
    at app.js:79
    at NodeList.forEach (<anonymous>)
    at HTMLSelectElement.filterTodo (app.js:76)


//selectors

const todoInput = document.querySelector('.todo-input');
const todoButton = document.querySelector('.todo-button');
const todoList = document.querySelector('.todo-list');
const filterOption = document.querySelector('.filter-todo');
//event listeners
todoButton.addEventListener("click", addTodo);
todoList.addEventListener('click', deleteCheck);
filterOption.addEventListener('click', filterTodo);

//funtions
function addTodo(event) {

    //prevent form from submiting
    event.preventDefault();


/// todo div

const todoDiv = document.createElement("div");
todoDiv.classList.add("todo");

//create li
const newTodo = document.createElement('li');
newTodo.innerText = todoInput.value;
newTodo.classList.add('todo-item');
todoDiv.appendChild(newTodo);

//check mark button
const completedButton = document.createElement('button');
completedButton.innerHTML= '<i class="fas fa-check"></i>';
completedButton.classList.add("complete-btn");
todoDiv.appendChild(completedButton);
//check trash button
const trashButton = document.createElement('button');
trashButton.innerHTML= '<i class="fas fa-trash"></i>';
trashButton.classList.add("trash-btn");
todoDiv.appendChild(trashButton);

//append to list
todoList.appendChild(todoDiv);

//clear todoinput value
todoInput.value="";


}

function deleteCheck(e){
    const item = e.target;
    //delete todo
    if(item.classList[0] === 'trash-btn'){
      const todo = item.parentElement;

      //animation
      todo.classList.add("fall");
      todo.addEventListener("transitionend", function(){
        todo.remove();
      });


     
    }

    //check mark
  if (item.classList[0] === "complete-btn") {
      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.contains("completed")) {
                        todo.style.display = "flex";

                    } else {
                        todo.style.display = "none";
                    }
                    
        }
    });
}
* {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    color: white;
    min-height: 100vh;
    background-image: linear-gradient(120deg, #f6d365, #fda085);
}
header{
    font-size: 1.5rem;

}

header,form{
    min-height: 20vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

form input, form button{
    padding: 0.5rem;
    font-size: 2rem;
    border: none;
    background: white;

}

form button{
    color: #d88771;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;

}
form button:hover{
    background: #d88771;
    color: white;
}

.todo-container{
    display: flex;
    justify-content: center;
    align-items: center;

}
.todo-list{
    min-width: 30%;
    list-style: none;

}
.todo {
    margin: 0.5rem;
    background: white;
    color: black;
    font-size: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.5s ease;
    
}
.todo li{
    flex: 1;
}
.trash-btn, .complete-btn{
    background: #ff6f47;
    color: white;
    padding: 1rem;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}


.complete-btn{
    background: rgb(73,204,73);
}
.todo-item{
    padding: 0rem 0.5rem;
}
.fa-trash, .fa-check{
    pointer-events: none;;
}

.completed{
    text-decoration: line-through;
    opacity: 0.5;
}
.fall{
    transform: translateY(8rem) rotateZ(20deg);
    opacity: 0;
}

select{
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   outline: none;
   border: none;
}

.select{
    margin: 1rem;
    position: relative;
    overflow: hidden;

}
select{
    color: #ff6f47;
    width: 10rem;
    cursor: pointer;
    padding: 1rem;
}
.select::after{
    content: "\25BC";
    position: absolute;
    background: #ff6f47;
    top: 0;
    right: 0;
    padding: 1rem;
    pointer-events: none;
    transition: all 0.3s ease;
}

.select:hover::after{
    background: white;
    color: #ff6f47;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;800&amp;display=swap" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To do list</title>
</head>
<body>
   <header>
       <h1>Yours todos</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="app.js"></script>
</body>
</html>

我正在尝试建立待办事项列表，但是我对show show已完成和未完成的待办事项代码有疑问，但是它的poppin类型错误。如果我尝试显示其正常显示的其他内容，我不知道它的弹出问题。LoremIpsum只是印刷和排版行业的虚拟文字。 Lorem Ipsum一直是我[

//selectors

const todoInput = document.querySelector('.todo-input');
const todoButton = document.querySelector('.todo-button');
const todoList = document.querySelector('.todo-list');
const filterOption = document.querySelector('.filter-todo');
//event listeners
todoButton.addEventListener("click", addTodo);
todoList.addEventListener('click', deleteCheck);
filterOption.addEventListener('click', filterTodo);

//funtions
function addTodo(event) {

    //prevent form from submiting
    event.preventDefault();


/// todo div

const todoDiv = document.createElement("div");
todoDiv.classList.add("todo");

//create li
const newTodo = document.createElement('li');
newTodo.innerText = todoInput.value;
newTodo.classList.add('todo-item');
todoDiv.appendChild(newTodo);

//check mark button
const completedButton = document.createElement('button');
completedButton.innerHTML= '<i class="fas fa-check"></i>';
completedButton.classList.add("complete-btn");
todoDiv.appendChild(completedButton);
//check trash button
const trashButton = document.createElement('button');
trashButton.innerHTML= '<i class="fas fa-trash"></i>';
trashButton.classList.add("trash-btn");
todoDiv.appendChild(trashButton);

//append to list
todoList.appendChild(todoDiv);

//clear todoinput value
todoInput.value="";


}

function deleteCheck(e){
    const item = e.target;
    //delete todo
    if(item.classList[0] === 'trash-btn'){
      const todo = item.parentElement;

      //animation
      todo.classList.add("fall");
      todo.addEventListener("transitionend", function(){
        todo.remove();
      });


     
    }

    //check mark
  if (item.classList[0] === "complete-btn") {
      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.contains("done")) {
                        todo.style.display = "flex";

                    } else {
                        todo.style.display = "none";
                    }
        }
    });
}
* {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    color: white;
    min-height: 100vh;
    background-image: linear-gradient(120deg, #f6d365, #fda085);
}
header{
    font-size: 1.5rem;

}

header,form{
    min-height: 20vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

form input, form button{
    padding: 0.5rem;
    font-size: 2rem;
    border: none;
    background: white;

}

form button{
    color: #d88771;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;

}
form button:hover{
    background: #d88771;
    color: white;
}

.todo-container{
    display: flex;
    justify-content: center;
    align-items: center;

}
.todo-list{
    min-width: 30%;
    list-style: none;

}
.todo {
    margin: 0.5rem;
    background: white;
    color: black;
    font-size: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.5s ease;
    
}
.todo li{
    flex: 1;
}
.trash-btn, .complete-btn{
    background: #ff6f47;
    color: white;
    padding: 1rem;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}


.complete-btn{
    background: rgb(73,204,73);
}
.todo-item{
    padding: 0rem 0.5rem;
}
.fa-trash, .fa-check{
    pointer-events: none;;
}

.completed{
    text-decoration: line-through;
    opacity: 0.5;
}
.fall{
    transform: translateY(8rem) rotateZ(20deg);
    opacity: 0;
}

select{
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   outline: none;
   border: none;
}

.select{
    margin: 1rem;
    position: relative;
    overflow: hidden;

}
select{
    color: #ff6f47;
    width: 10rem;
    cursor: pointer;
    padding: 1rem;
}
.select::after{
    content: "\25BC";
    position: absolute;
    background: #ff6f47;
    top: 0;
    right: 0;
    padding: 1rem;
    pointer-events: none;
    transition: all 0.3s ease;
}

.select:hover::after{
    background: white;
    color: #ff6f47;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;800&amp;display=swap" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To do list</title>
</head>
<body>
   <header>
       <h1>Yours todos</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="done">done</option>
               <option value="uncompleted">Uncompleted</option>
           </select>
       </div>
   </form>

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

    <script src="app.js"></script>
</body>
</html>

1 个答案:

答案 0 :(得分：0)

filterTodo 方法

const todos = todoList.childNodes;

childNodes 属性返回节点的子节点的集合，作为NodeList对象。 元素内部的空白被视为文本，而文本被视为节点。注释也被视为节点。

您只需要元素节点，要获取元素节点，请使用子项属性

const todos = todoList.children;

这将返回HTMLCollection，这不是您可以循环访问的普通数组，您需要将其转换为简单数组，为此，请使用扩展运算符（...）

const todos = [...todoList.children];

解决方案

function filterTodo(e) {
    const todos = [...todoList.children];
    todos.forEach(function(todo, index) {
        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";
                }
                break;
        }
    });
}
相关问题
最新问题