极客观点
项目管理
HarmonyOS
问题描述
正在进行的任务点击checkbox后，无法自动归类到已完成，由DOM来实现
问题出现的平台版本及自己尝试过哪些方法
尝试过去掉css文件来运行，以为是css会覆盖内容
相关代码
粘贴代码文本（请勿用截图）
//主页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>任务todo</title>
<link rel="stylesheet" href="./css/todolist.css" />
</head>
<body>
<header>
<section id="header-section">
<label for="title">ToDoList</label>
<input type="text" id="title" name="title"
placeholder="添加任务" autocomplete="off"/>
<button id="add-btn">添加</button>
</section>
</header>
<main>
<section id="content">
<h1>正在进行<span id="todoCount"></span></h1>
<ul id="todoList"></ul>
<h1>已经完成<span id="doneCount"></span></h1>
<ul id="doneList"></ul>
</section>
</main>
</body>
<script type="text/javascript" src="./index.js"></script>
</html>//js文件
let data = {
todoArr: [],
doneArr: []
};
function main() {
let storage = localStorage.getItem("todo");
if (storage !== null) {
data = JSON.parse(storage);
render(data);
}
//获取按钮DOM
let addBtn = document.getElementById("add-btn");
//获取input DOM
let titleInput = document.getElementById("title");
//为按钮增加click事件监听
addBtn.addEventListener("click", (event) => {
if (titleInput.value) {
data.todoArr.push(titleInput.value);
render(data);
titleInput.value = "";
}
});
//获取容器DOM
let contentDom = document.getElementById("content");
//通过事件代理的方式，监听input派发的change事件
contentDom.addEventListener("change", (event) => {
let target = event.target;
if (target.dataset.from === "todo" && target.tagName === "INPUT") {
let index = +target.dataset.index;
//删除这一项
let value = data.todoArr.splice(index, 1)[0];
//添加到done
data.doneArr.push(value);
render(data);
} else if (target.dataset.from === "done" && target.tagName === "INPUT") {
let index = +target.dataset.index;
let value = data.doneArr.splice(index, 1)[0];
data.todoArr.push(value);
render(data);
}
});
//通过事件代理的方式，监听tag派发的click事件
contentDom.addEventListener("click", (event) => {
let target = event.target;
if (target.dataset.from === "todo" && target.tagName === "IMG") {
let index = +target.dataset.index;
data.todoArr.splice(index, 1);
render(data);
} else if (target.dataset.from === "done" && target.tagName === "IMG") {
let index = +target.dataset.index;
data.doneArr.splice(index, 1);
render(data);
}
});
}
let imgSrc = "https://ts1.cn.mm.bing.net/th/id/R-C.f1d02b4e59751fba384245ebf3c42688?rik=xMnkkxisjTQERA&riu=http%3a%2f%2fcdn.onlinewebfonts.com%2fsvg%2fimg_513596.png&ehk=gUYMqjE9AcyrMbJullahgYyLu0QYUGZPs0Gm%2f8%2bn4Nc%3d&risl=&pid=ImgRaw&r=0";
function render(data) {
localStorage.setItem("todo", JSON.stringify(data));
//先清空内容
let todoContainer = document.getElementById("todoList");
todoContainer.innerHTML = "";
let doneContainer = document.getElementById("doneList");
doneContainer.innerHTML = "";
//直接拼接HTML
let todoArr = data.todoArr;
let todoHTML = "";
for (let i = 0, len = todoArr.length; i < len; i++) {
todoHTML += `
<li>
<input type="checkbox" id="checkb" data-form="todo" data-index="${i}"></input>
<span>${todoArr[i]}</span>
<img src="${imgSrc}" data-from="todo" data-index="${i}"></img>
</li>`;
}
todoContainer.innerHTML = todoHTML;
//通过DOM API
let doneArr = data.doneArr;
for (let i = 0, len = doneArr.length; i < len; i++) {
let li = document.createElement("li");
let input = document.createElement("input");
input.type = "checkbox";
input.setAttribute("checked", "");
input.dataset.index = i;
input.dataset.from = "done";
let span = document.createElement("span");
span.textContent = doneArr[i];
let img = document.createElement("img");
img.src = imgSrc;
img.dataset.index = i;
img.dataset.from = "done";
li.appendChild(input);
li.appendChild(span);
li.appendChild(img);
doneContainer.appendChild(li);
}
}
//在文档完全加载后触发load事件
window.onload = main;//css文件
body{
display: flex;
margin:0 300px;
border-left: 2px solid #999;
border-right: 2px solid #999;
border-bottom: 2px solid #999;
flex-direction: column;
}
header{
display: flex;
height: 50px;
background-color: rgb(29, 29, 245);
}
#header-section{
display: flex;
}
label{
font-size: 30px;
color: rgb(238, 237, 231);
margin: 6px;
}
#title{
height: 30px;
border-radius: 50px;
text-align: center;
font-size: 20px;
margin: 8px 0px 8px 110px;
width: 510px;
}
#add-btn{
font-size: 20px;
border-radius: 50px;
height: 35px;
width: 80px;
margin: 8px 0px 0px 15px;
}
main{
display: flex;
}
#content{
flex-direction: column;
display: flex;
}
#todoList{
padding: 0px;
}
li{
padding: 10px 0;
border-left: 4px solid rgb(160, 93, 223);
display: flex;
border-bottom: 1px solid #999;
height: 29px;
width: 867px;
}
#checkb{
padding-left: 0px;
width: 28px;
height: 28px;
}
img{
position: absolute;
width: 28px;
height: 28px;
right: 350px;
} 你期待的结果是什么？实际看到的错误信息又是什么？
checkbox选中后，可以将“正在进行”的任务归类到“已完成”
U1S1, js那块代码写的真的是有点乱啊。。。
主要问题出现在单词拼写错误
将
from全局替换成form就行了