javascript - Javascript 待办事项列表应用程序。我无法删除最后剩余的 li 并清除所有按钮不起作用,只有本地存储被删除
问题描述
我遇到了关于我的 todo 应用程序的 2 个问题。我只是根据其中一个 Youtube 教程进行编码,以提高我的 Javascript 知识。我无法删除待办事项列表中最后剩余的 li,但本地存储显示它已被删除。与我的全部清除按钮一样,本地存储已被删除,但我的 li 仍在显示。除此之外,点击清除所有按钮后,即使仍然显示,我也无法将其一一删除(我的猜测是本地存储已为空,没有更多数据可删除)。感谢您以后的回复!
const inputBox = document.querySelector('.input-container input')
const addBtn = document.querySelector('.input-container button')
const todo = document.querySelector('.todo-list')
const deleteAllBtn = document.querySelector('.footer button')
// input button
inputBox.onkeyup = () => {
let userData= inputBox.value;
if (userData.trim() != 0 ) {
addBtn.classList.add('active')
} else {
addBtn.classList.remove('active');
}
}
showTask();
//adding it to local storage
addBtn.onclick = () => {
let userData = inputBox.value;
let getLocalStorage = localStorage.getItem("New Todo")
if (getLocalStorage == null) {
listArr = [];
} else {
listArr = JSON.parse(getLocalStorage);
}
listArr.push(userData);
localStorage.setItem("New Todo", JSON.stringify(listArr));
showTask();
addBtn.classList.remove('active');
}
//add task
function showTask() {
let getLocalStorage = localStorage.getItem("New Todo")
if (getLocalStorage == null) {
listArr = [];
} else {
listArr = JSON.parse(getLocalStorage);
}
const pendingNumb = document.querySelector('.pending');
pendingNumb.textContent= listArr.length;
let newLiTag = '';
listArr.forEach((element, index) => {
newLiTag += `<li> ${element} <span onclick="deleteTask(${index})";><i class="fas fa-trash-alt"></i></span></li>
`;
todo.innerHTML = newLiTag;
inputBox.value = '';
});
}
//delete task
function deleteTask(index) {
let getLocalStorage = localStorage.getItem("New Todo");
listArr = JSON.parse(getLocalStorage);
listArr.splice(index, 1);
localStorage.setItem("New Todo", JSON.stringify(listArr));
showTask();
}
//delete all task
deleteAllBtn.onclick = () => {
listArr = [];
localStorage.setItem("New Todo", JSON.stringify(listArr));
showTask();
}
.todo-list {
margin: 10px 0;
width: 360px;
height: 260px;
max-height: 250px;
overflow-y: auto;
}
.todo-list li {
position: relative;
list-style-type: none;
background: #f2f2f2;
margin: 5px 0;
display: flex;
justify-content: space-between;
padding: 5px 5px;
overflow: hidden;
}
.todo-list li span {
position: absolute;
right: -30px;
top: 0;
background: #d00000;
color: #fff;
width: 35px;
height: 35px;
padding-top: 5px;
text-align: center;
transition: all 0.3s ease;
cursor: pointer;
}
.todo-list li:hover span {
right: 0;
}
.footer {
font-size: 17px;
font-weight: bold;
margin: 0 10px;
}
.footer span {
margin: 0 10px;
}
.footer button {
height: 2.5rem;
width: 5rem;
font-size: 1rem;
color: #fff;
background: #d00000;
border: none;
cursor: pointer;
}
<div class="container">
<h1>TODO list</h1>
<div class="input-container">
<input type="text" class="input" placeholder="Input Text Here">
<button><i class="fas fa-plus"></i></button>
</div>
<ul class="todo-list">
</ul>
<div class="footer">
<span>You have<span class="pending">0</span>pending task left</span>
<button>Clear All</button>
</div>
解决方案
您应该更新todo
forEach 之外的元素
function showTask() {
let getLocalStorage = localStorage.getItem("New Todo")
if (getLocalStorage == null) {
listArr = [];
} else {
listArr = JSON.parse(getLocalStorage);
}
const pendingNumb = document.querySelector('.pending');
pendingNumb.textContent = listArr.length;
let newLiTag = '';
listArr.forEach((element, index) => {
newLiTag += `<li> ${element} <span onclick="deleteTask(${index})";><i class="fas fa-trash-alt"></i></span></li>
`;
});
//move it here
todo.innerHTML = newLiTag;
inputBox.value = '';
}
推荐阅读
- javascript - 当您将 JavaScript (jQuery) 链接为单独的文件时,它有时不起作用
- vue.js - 如何使用 vue.js 和 element-ui 的文件上传组件在上传到服务器之前预览文件?
- c# - 在 C# 中根据样式获取 HTML 元素
- node.js - 使用超测试将查询字符串传递给 api 抛出错误:ECONNREFUSED:连接被拒绝
- oracle - 在执行查询之前验证结果
- .htaccess - 将 url 重写到另一个域,同时保留 url 的最后一部分
- java - InetAddress.getAllByName() 被阻塞
- reactjs - Firestore onSnapshot 更新并将数组添加到 DOM 而不是仅更新
- laravel - 如何在 Laravel 上更改集合结果中的字段名称
- unity3d - 单击屏幕时对象闪烁或消失并出现 - vuforia 增强现实