技术菜鸟也能轻松学会的 JavaScript 待办事项列表制作指南

2023-12-02 12:11:29

入门

首先，您需要一个代码编辑器和一个浏览器。我推荐使用 Visual Studio Code 和 Google Chrome。一旦您准备就绪，就可以开始创建您的待办事项列表了。

创建基本结构

首先，创建一个名为 index.html 的新文件。这是您的待办事项列表的 HTML 文件。在其中添加以下代码：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>待办事项列表</h1>
  <ul id="todo-list"></ul>
  <script src="script.js"></script>
</body>
</html>

此代码创建了一个基本的 HTML 文档，其中包含一个 <h1> 标题和一个 ul 列表。这个列表将用于显示您的待办事项。

接下来，创建一个名为 script.js 的新文件。这是您的待办事项列表的 JavaScript 文件。在其中添加以下代码：

// 获取待办事项列表元素
const todoList = document.getElementById('todo-list');

// 创建一个待办事项项
const createTodoItem = (text) => {
  // 创建一个新的 li 元素
  const li = document.createElement('li');

  // 创建一个新的 input 元素
  const input = document.createElement('input');
  input.type = 'checkbox';

  // 创建一个新的 span 元素
  const span = document.createElement('span');
  span.textContent = text;

  // 将 input 和 span 元素添加到 li 元素中
  li.appendChild(input);
  li.appendChild(span);

  // 将 li 元素添加到待办事项列表中
  todoList.appendChild(li);
};

// 添加一个待办事项项
createTodoItem('学习 JavaScript');

// 添加一个事件侦听器，以便在点击复选框时删除待办事项项
todoList.addEventListener('click', (e) => {
  if (e.target.type === 'checkbox') {
    e.target.parentElement.remove();
  }
});