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

WEB前端 waitig 699℃ 百度已收录 0评论

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>动态添加删除</title>
<!–
  题目描述:
          1. 点击增加,可以动态添加一行文本框
          2. 点击展示文本,可以alert弹出当前所有文本框内的内容
          3. 点击清空内容,清空当前所有文本框的内容
–>
<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>


本文由【waitig】发表在等英博客
本文固定链接:Js中文本框的动态添加 展示文本 清空内容
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)