使用JavaScript创建一个待办事项列表

在现代的web开发中，待办事项列表是一个常见且实用的功能。它允许用户记录、追踪和完成他们的任务。在这篇文章中，我们将使用纯JavaScript来创建一个简单的待办事项列表。我们会涉及到HTML结构的创建、CSS样式的添加以及JavaScript交互的实现。

步骤1： 创建HTML结构

首先，我们需要在HTML文件中定义待办事项列表的结构。我们可以使用一个输入框让用户输入任务，一个按钮来添加任务，以及一个无序列表来显示任务。

  
  
  
      
      
      
      
  
  
    
  
        
Todo List
  
          
        Add Todo  
        
  
        
  
    
  
      
  

步骤2： 添加CSS样式

接下来，我们可以在一个单独的CSS文件中添加一些样式来美化我们的待办事项列表。例如，我们可以为输入框、按钮和列表项添加样式

/* styles.css */  
.container {  
    max-width: 600px;  
    margin: 0 auto;  
    padding: 20px;  
}  
  
input[type="text"] {  
    width: 100%;  
    padding: 10px;  
    margin-bottom: 10px;  
}  
  
button {  
    padding: 10px 20px;  
    background-color: #007BFF;  
    color: white;  
    border: none;  
    cursor: pointer;  
    margin-bottom: 10px;  
}  
  
ul {  
    list-style-type: none;  
    padding: 0;  
}  
  
li {  
    padding: 10px;  
    background-color: #F8F9FA;  
    margin-bottom: 5px;  
}

步骤3： 使用JavaScript实现交互功能

最后，我们需要在JavaScript文件中编写代码来实现待办事项的添加和显示功能。我们可以通过为按钮添加一个事件监听器来实现这一点，当按钮被点击时，获取输入框的值，创建一个新的列表项，并将其添加到列表中。

// script.js  
document.addEventListener('DOMContentLoaded', function() {  
    const todoInput = document.getElementById('todoInput');  
    const addButton = document.getElementById('addButton');  
    const todoList = document.getElementById('todoList');  
      
    addButton.addEventListener('click', function() {  
        const todoText = todoInput.value.trim(); // 获取输入框的值并去除前后的空格  
        if (todoText) { // 如果输入框的值不为空  
            const listItem = document.createElement('li'); // 创建一个新的列表项元素li  
            listItem.textContent = todoText; // 设置列表项的文本内容为输入框的值  
            todoList.appendChild(listItem); // 将新的列表项添加到无序列表ul中  
            todoInput.value = ''; // 清空输入框的值以便用户输入下一个待办事项  
        } else {  
            alert('Please enter a valid todo'); // 如果输入框的值为空，则显示一个警告消息提醒用户输入有效的待办事项内容。注意这里只是一个简单的错误处理，实际开发中可能需要更友好的用户体验设计。  
        }  
    });  
});

现在，当你打开HTML文件时，你应该能够看到一个简单的待办事项列表应用程序。你可以在输入框中输入任务，点击按钮将其添加到列表中。每个任务都会作为一个新的列表项显示在列表中。当然，这只是一个基本示例，你可以根据自己的需求扩展它，例如添加删除任务的功能、标记任务为已完成的功能等。希望这篇文章能帮助你了解如何使用JavaScript创建一个待办事项列表！