JS按钮点击多次触发多次不同的事件

最新推荐文章于 2024-06-28 13:55:12 发布

奔跑的大橙子

最新推荐文章于 2024-06-28 13:55:12 发布

阅读量4.5k

点赞数 5

分类专栏： Javascript HTML

本文链接：https://blog.csdn.net/qq_42901608/article/details/89198148

版权

Javascript 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

关于JS多次触发不同事件的按钮，有三种方法效果。

第一种：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>奔跑的橙子学习JS</title>
	</head>
	<body>
		<h1 id="bt">这是原来的标题</h1>
		<button type="button" onclick="bian()">改变标题内容</button>
		
	</body>
	
	<script type="application/javascript">
		    var a = ['1111','22222','3333','44444'];
				var f = 0;
			function bian(){
				if(f==0){
                    document.getElementById("bt").innerHTML = a[0];
                    }if(f==1){
                         document.getElementById("bt").innerHTML = a[1];
                    }if(f==2){
                        document.getElementById("bt").innerHTML = a[2];
                    }if(f==3){
                        document.getElementById("bt").innerHTML = a[3];
                       }if(f==4){
                        document.getElementById("bt").innerHTML = a[0];
                        f=0;
                       }
		f++;
			}
		</script>
</html>

第二种：相对第一种简化优化了步骤

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>奔跑的橙子学习JS</title>
	</head>
	<body>
		<h1 id="bt">这是原来的标题</h1>
		<button type="button" onclick="bian()">改变标题内容</button>
		
	</body>
	
	<script type="application/javascript">
		    var a = ['1111','22222','3333','44444'];
				var f = 0;
			function bian(){
				if(f>3){
		            f=0;
		        }
		        for(var i=0;i<=f;i++){
		            document.getElementById("bt").innerHTML=a[i];
		        }
				f++;
			}
		</script>
</html>

第三种方式是最简单优化的了：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>奔跑的橙子学习JS</title>
	</head>
	<body>
		<h1 id="bt">这是原来的标题</h1>
		<button type="button" onclick="bian()">改变标题内容</button>
		
	</body>
	
	<script type="application/javascript">
		    var a = ['1111','22222','3333','44444'];
				var f = 0;
			function bian(){
				if(f>3){
		            f=0;
		        }
		        
		            document.getElementById("bt").innerHTML=a[f];
		       
				f++;
			}
		</script>
</html>

奔跑的大橙子

关注

5
点赞
踩
16

收藏

觉得还不错? 一键收藏
2
评论
JS按钮点击多次触发多次不同的事件

关于JS多次触发不同事件的按钮，有三种方法效果。第一种：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>奔跑的橙子学习JS</title> </head> <body> <h1 id="bt"&gt...
复制链接

扫一扫

专栏目录