搭建一个TodoList应用是一个很好的练习项目,可以帮助你熟悉JavaScript的基础知识和DOM操作。下面是一个简单的教程,帮助你完成这个项目:

  1. 创建HTML文件 首先,创建一个HTML文件,用于显示TodoList应用的界面。在文件中添加一个输入框用于输入待办事项,并添加一个按钮用于添加待办事项。同时,在页面中添加一个空的ul元素用于显示待办事项列表。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TodoList App</title>
</head>
<body>
    <h1>TodoList App</h1>
    <input type="text" id="todoInput">
    <button id="addTodoBtn">Add Todo</button>
    <ul id="todoList"></ul>

    <script src="app.js"></script>
</body>
</html>
  1. 创建JavaScript文件 在同一目录下创建一个名为app.js的JavaScript文件,用于编写TodoList应用的逻辑。在该文件中,我们需要实现以下功能:
  • 获取输入框和按钮的元素
  • 监听按钮的点击事件
  • 在点击按钮时,创建一个新的li元素,并将输入框中的值添加到li元素中
  • 将新创建的li元素添加到ul元素中
const todoInput = document.getElementById('todoInput');
const addTodoBtn = document.getElementById('addTodoBtn');
const todoList = document.getElementById('todoList');

addTodoBtn.addEventListener('click', () => {
    const todoText = todoInput.value;
    if (todoText.trim() !== '') {
        const todoItem = document.createElement('li');
        todoItem.textContent = todoText;
        todoList.appendChild(todoItem);
        todoInput.value = '';
    }
});
  1. 运行项目 将HTML文件和JavaScript文件保存在同一目录下,并在浏览器中打开HTML文件,你就可以看到一个简单的TodoList应用了。你可以输入待办事项,并点击添加按钮将其添加到待办事项列表中。

这是一个非常简单的TodoList应用,你可以根据自己的需求进行扩展和改进。你可以添加删除待办事项、标记已完成的待办事项等功能,来进一步完善这个项目。希望这个教程对你有所帮助,祝你顺利完成这个项目!