用 HTML 和 JavaScript 打造带添加与编辑功能的简易待办事项列表应用

下面是一个简单的待办事项列表应用的实现，使用HTML和JavaScript。这个应用允许用户添加新的待办事项，并且可以编辑已有的待办事项。 HTML部分 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>待办事项列表</title> <style> body { font-family: Arial, sans-serif; } #todo-list { margin-top: 20px; } .todo-item { margin-bottom: 10px; } .edit-input { display: none; } </style> </head> <body> <h1>我的待办事项</h1> <input type="text" id="new-todo" placeholder="添加新待办事项"> <button onclick="addTodo()">添加</button> <ul id="todo-list"></ul> <script> function addTodo() { const input = document.getElementById('new-todo'); const text = input.value.trim(); if (text === '') return; const li = document.createElement('li'); li.className = 'todo-item'; li.innerHTML = ` <span class="todo-text">${text}</span> <input type="text" class="edit-input"> <button onclick="editTodo(this)">编辑</button> <button onclick="saveTodo(this)">保存</button> `; document.getElementById('todo-list').appendChild(li); input.value = ''; } function editTodo(button) { const li = button.parentElement; const textSpan = li.querySelector('.todo-text'); const editInput = li.querySelector('.edit-input'); editInput.value = textSpan.textContent; textSpan.style.display = 'none'; editInput.style.display = 'inline'; } function saveTodo(button) { const li = button.parentElement; const textSpan = li.querySelector('.todo-text'); const editInput = li.querySelector('.edit-input'); textSpan.textContent = editInput.value; textSpan.style.display = 'inline'; editInput.style.display = 'none'; } </script> </body> </html> ``` 功能说明 - 添加待办事项：用户在输入框中输入待办事项后，点击“添加”按钮，新的待办事项会添加到列表中。 - 编辑待办事项：每个待办事项旁边有一个“编辑”按钮，点击后可以编辑该事项的内容。 - 保存编辑：编辑完成后，点击“保存”按钮，更新待办事项的内容。额外需要注意的逻辑点 1. 在添加待办事项时，确保输入框中的内容不为空，避免添加空白的待办事项。 2. 编辑功能中，切换显示文本和输入框时，确保输入框的初始值是当前待办事项的文本。 3. 保存编辑时，确保更新后的内容不为空，避免保存无效的编辑。 ######[AI写代码神器 | 640点数解答 | 2025-02-15 19:46:01]

服务商

更多选项

快捷项

自定义