<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>To-Do-List设计</title><linkrel="stylesheet"href="./style.css"></head><body><sectionclass="container"><divclass="heading"><imgclass="heading_img"src="https://iconfont.alicdn.com/s/1b8cdd11-88e3-4e9a-86bb-5bb4314a472b_origin.svg"><h1class="heading_title">To-Do List</h1></div><formclass="form"><div><labelclass="form_label"for="todo">~ Today I want to do ~</label><inputclass="form_input"type="text"id="todo"name="to-do"size="30"required><buttonclass="button"><span>Submit</span></button></div></form><div><ulclass="toDoList"></ul></div></section><!-- partial --><scriptsrc="./script.js"></script></body></html>
(()=>{// 状态变量let toDoListArray =[];// ui 变量const form = document.querySelector(".form");const input = form.querySelector(".form_input");const ul = document.querySelector(".toDoList");// 事件监听
form.addEventListener('submit',e=>{// 页面重新加载时防止默认行为
e.preventDefault();// 为项提供唯一 IDlet itemId =String(Date.now());// 获取和分配输入值let toDoItem = input.value;// 将 ID 和项传递到函数中addItemToDOM(itemId , toDoItem);addItemToArray(itemId, toDoItem);// 清除输入框
input.value ='';});
ul.addEventListener('click',e=>{let id = e.target.getAttribute('data-id')if(!id)return// 传递 id 到函数removeItemFromDOM(id);removeItemFromArray(id);});functionaddItemToDOM(itemId, toDoItem){// 创建一个列表const li = document.createElement('li')
li.setAttribute("data-id", itemId);// 将 todoItem 中的内容添加到列表中
li.innerText = toDoItem
// 将 li 添加到 DOM
ul.appendChild(li);}functionaddItemToArray(itemId, toDoItem){// 将项作为 ID 为的对象添加到数组中,以便以后可以查找和删除它
toDoListArray.push({ itemId, toDoItem});
console.log(toDoListArray)}functionremoveItemFromDOM(id){// 按数据 ID 获取列表项var li = document.querySelector('[data-id="'+ id +'"]');// 删除列表项
ul.removeChild(li);}functionremoveItemFromArray(id){// 创建一个新的 toDoListArray,包含所有与 ID 不匹配的列表
toDoListArray = toDoListArray.filter(item=> item.itemId !== id);
console.log(toDoListArray);}})();