Js中文本框的动态添加展示文本清空内容

最新推荐文章于 2023-04-11 11:01:49 发布

Dewey666

最新推荐文章于 2023-04-11 11:01:49 发布

阅读量3.5k

点赞数 1

分类专栏：效果初现文章标签：动态创建标签createElement getElementsByTagName getElementById 添加结点appendChild

本文链接：https://blog.csdn.net/IT666DHW/article/details/78175470

版权

效果初现专栏收录该内容

107 篇文章 3 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>动态添加删除</title>

<script type="text/javascript">
//给添加按钮添加点击事件的add()函数
var val = 4;
function add(){
//1. 创建输入框
var input = document.createElement("input");

//2. 为输入框添加内容属性,每添加一次，val数值加1
input.value = "输入框"+val;
val++;

//3. 将输入框放到指定位置（添加在最后位置）
var center = document.getElementById("center");
center.appendChild(input);
var br1 = document.createElement("br");
var br2 = document.createElement("br");
center.appendChild(br1);
center.appendChild(br2);
}

//给展示文本按钮添加点击事件的show()函数
function show(){
//1. 首先获取所有input标签的value值集合
var inputs = document.getElementsByTagName("input");
var str = "";

//2. 遍历集合数据，赋给空字符串，弹出其内容
for(i = 0; i<inputs.length;i++){
str = str + inputs.item(i).value;
}
alert(str);
}

//给清空内容按钮添加点击事件的clears()函数(clear是关键字)
function clears(){
//1. 首先获取所有input标签的value值集合
var inputs = document.getElementsByTagName("input");

//2. 遍历集合数据,最后重新赋值为空，即清空数据
for(i = 0; i<inputs.length;i++){
inputs.item(i).value = "";
}
}
</script>
</head>

<body>
<center id="center">

<button onClick="add()">添加输入框</button>
<button onClick="show()">展示文本</button>
<button onClick="clears()">清空内容</button><br/><br/>

<input type="text" value="输入框1"/> <br/><br/>
<input type="text" value="输入框2"/> <br/><br/>
<input type="text" value="输入框3"/> <br/><br/>

</center>
</body>
</html>

Dewey666

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
Js中文本框的动态添加展示文本清空内容

动态添加删除题目描述： 1. 点击增加，可以动态添加一行文本框 2. 点击展示文本，可以alert弹出当前所有文本框内的内容 3. 点击清空内容，清空当前所有文本框的内容-->//给添加按钮添加点击事件的add()函数var val = 4;function add(){ //1. 创建输入
复制链接

扫一扫