编写页面分别包含“获取数据”“重置数据”两个按钮,以及输入框和文本显示效果
时间: 2023-10-01 21:09:10 浏览: 41
以下是一个简单示例,包含一个输入框和一个文本显示框,以及“获取数据”、“重置数据”两个按钮。点击“获取数据”按钮将会在文本显示框中显示输入框中的内容,点击“重置数据”按钮将会清空输入框和文本显示框的内容。
```html
<!DOCTYPE html>
<html>
<head>
<title>按钮示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// 获取数据按钮点击事件
$("#getDataBtn").click(function(){
var inputData = $("#inputData").val();
$("#displayData").text(inputData);
});
// 重置数据按钮点击事件
$("#resetDataBtn").click(function(){
$("#inputData").val("");
$("#displayData").text("");
});
});
</script>
</head>
<body>
<input type="text" id="inputData"><br>
<button id="getDataBtn">获取数据</button>
<button id="resetDataBtn">重置数据</button><br>
<textarea id="displayData" rows="5" cols="30"></textarea>
</body>
</html>
```
你可以将代码复制到一个 HTML 文件中,然后在浏览器中打开该文件进行测试。
相关推荐
![application/msword](https://img-home.csdnimg.cn/images/20210720083327.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)