【JavaScript---添加删除功能】

最新推荐文章于 2023-08-23 23:20:04 发布

听风ღ᭄

最新推荐文章于 2023-08-23 23:20:04 发布

阅读量426

点赞数 1

分类专栏： JavaScript HTML 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_70054369/article/details/128292827

版权

HTML 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

JavaScript

7 篇文章 0 订阅

订阅专栏

本文介绍了一个简单的JavaScript程序，用于实现信息的添加与删除功能。通过两个按钮操作，可以将输入框中的信息添加到显示区域，也可以从显示区域中删除最早添加的信息。此示例适用于初学者了解基本的DOM操作。

摘要由CSDN通过智能技术生成

效果图

前言

JavaScript代码—添加删除功能

JavaScript代码

<html>
	<head>
		<meta charset="utf-8"/>
		<title>添加删除功能</title>
	</head>
	<body>	
<input type="text" id="txt" placeholder="请输入您要添加的信息" name="信息" />
		<button onclick="add()">添加</button>
		<button onclick="del()">删除</button>
		<div id="show">
			
		</div>
		<script>
			var arr = [1,2,3];
			
			function add(){
				var str = "";//定义个字符变量(来接受我们输出的信息)
					//添加的功能
					//1.获取文本框的内容
					//2.把内容添加到数组当中
					//3.把输出内容输出出来
					var txt = document.getElementById('txt').value;
					//1.文本框内的值
					arr.push(txt);
					//2.把文本框的内容添加到数组当中
					//3.输出
					for(var i=0;i<arr.length;i++)
					{
						str=str+arr[i]+"<br/>";
					}
					document.getElementById('show').innerHTML=str;
					document.getElementById('txt').value="";//文本框的内容等于空
					//让文本框获取焦点
					document.getElementById('txt').focus();
			}	
			
			function del(){
					//删除功能
					//1.从数组中删除数据
					//2.从新输出新的数组
					arr.shift();//第一步已完成
					
					//第二部
					var str = "";//字符类型
					for(var i =0;i<arr.length;i++)//3
					{
						str=str+arr[i]+"<br/>";
					}
					document.getElementById('show').innerHTML=str;
					
			}
		</script>
	</body>
</html>