用原生js帮我写一份todolist
时间: 2023-08-06 20:07:06 浏览: 42
好的,以下是使用原生JavaScript编写的一个简单的todolist示例代码:
HTML部分:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Todo List</title>
</head>
<body>
<h1>Todo List</h1>
<input type="text" id="new-task" placeholder="Add new task">
<button id="add-task">Add</button>
<ul id="task-list"></ul>
<script src="app.js"></script>
</body>
</html>
```
JavaScript部分:
```
// 获取元素
const newTaskInput = document.getElementById('new-task');
const addTaskButton = document.getElementById('add-task');
const taskList = document.getElementById('task-list');
// 添加任务
function addTask() {
// 获取文本框的内容
const taskText = newTaskInput.value;
// 创建新的任务列表项
const newTaskItem = document.createElement('li');
newTaskItem.innerText = taskText;
// 将新的任务列表项添加到任务列表中
taskList.appendChild(newTaskItem);
// 清空文本框
newTaskInput.value = '';
}
// 添加按钮的点击事件
addTaskButton.addEventListener('click', addTask);
```
上述代码实现了一个简单的todolist功能,当用户输入任务内容并点击“Add”按钮时,程序将在任务列表中添加一个新的列表项。您可以根据自己的需求修改代码,添加更多功能,比如删除和编辑任务等。