web前端：自定义属性2：举例——点击按钮，值的改变互不影响，按钮内的value值根据定义的数组数据随着点击次数的增加的内容的改变，

最新推荐文章于 2022-06-23 02:50:25 发布

是个小菜鸟没错了

最新推荐文章于 2022-06-23 02:50:25 发布

阅读量616

点赞数

分类专栏： web前端——JS

本文链接：https://blog.csdn.net/weixin_43170073/article/details/90452972

版权

web前端——JS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>尝试的path</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
	<!--自定义属性应用-->
	<!--主要是点击按钮，数字增加0变成A,B,C,D或者其它类似-->
	<input type="button" value="0">
	<input type="button" value="0">
	<input type="button" value="0">	
	<script type="text/javascript">
		window.onload = function(){
			var aBtn = document.getElementsByTagName('input');
			var arr = ['A','B','C','D'];  //定义数组，当点击按钮时按钮中的值由0变成A,B，C，D
			for(var i=0;i<aBtn.length;i++){
				aBtn[i].num = 0;  //为button自定义属性，从0开始
				aBtn[i].onclick = function(){
					this.value = arr[this.num];   //arr[this.num]表示的是arr[0]——从自定义属性num可以看出。其中this表示的是这个按钮而不是window，所以this.value表示的是这个按钮中的value值，=表示赋值
					//alert(arr[this.num]);//点击一开始就是0
					this.num++;
					if(this.num==arr.length){//运用if的原因是当点击按钮出现数字D后，会跑到数组外，所以要用if进行条件判断
						this.num=0;
					}
				}
			}
		}
	</script>	
</body>
</html>

在这里插入图片描述
随机点击一个按钮，按钮值随之改变：

是个小菜鸟没错了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端：自定义属性2：举例——点击按钮，值的改变互不影响，按钮内的value值根据定义的数组数据随着点击次数的增加的内容的改变，

1.源代码<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>尝试的path</title><meta name...
复制链接

扫一扫