js待办事项 单击添加按钮 将文本框中输入内容显示在下方 的列表中 ,如果文本框内容为空,则弹出提示框请输入代办事项
时间: 2023-11-22 10:54:57 浏览: 147
ExcelVBA常用技巧shape图形Chart图表对象.docx
好的,你需要一个 HTML 文件和一个 JavaScript 文件来实现这个功能。HTML 文件中需要有一个文本框、一个添加按钮和一个列表,JavaScript 文件中需要编写添加代办事项的函数。
以下是代码示例:
HTML 文件:
```html
<!DOCTYPE html>
<html>
<head>
<title>JS Todo List</title>
<meta charset="UTF-8">
</head>
<body>
<h1>JS Todo List</h1>
<input type="text" id="inputText">
<button onclick="addTodo()">Add</button>
<ul id="todoList"></ul>
<script src="script.js"></script>
</body>
</html>
```
JavaScript 文件:
```javascript
function addTodo() {
var inputText = document.getElementById("inputText");
var todoList = document.getElementById("todoList");
var newTodo = inputText.value.trim();
if (newTodo === "") {
alert("Please enter a todo item.");
return;
}
var li = document.createElement("li");
li.innerHTML = newTodo;
todoList.appendChild(li);
inputText.value = "";
}
```
在这个示例中,我们首先获取文本框中的内容和列表元素,然后去掉输入内容前后的空格,并判断是否为空。如果为空,弹出提示框并返回。如果不为空,我们创建一个新的列表项元素,并将输入内容添加到其中,最后将该元素添加到列表中。最后,将文本框清空以便下次输入。
你可以将这些代码复制到两个文件中,并在浏览器中打开 HTML 文件以查看效果。
阅读全文