JavaScript索引值

最新推荐文章于 2024-05-20 21:15:00 发布

Lvdon9

最新推荐文章于 2024-05-20 21:15:00 发布

阅读量969

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/qq_37995109/article/details/85346970

JavaScript 专栏收录该内容

106 篇文章

订阅专栏

本文介绍了一个使用JavaScript处理按钮点击事件的例子，通过事件监听器实现按钮值和页面元素内容的动态更改。代码展示了如何获取DOM元素，自定义属性，并在点击事件中更新输入框值和段落文本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function (){
	var aBtn = document.getElementsByTagName('input');
	var ap = document.getElementsByTagName('P');
	
	//想建立匹配对应关系, 就用索引值
	var arr=['默默','张申','杜鹏'];
	for(var i=0; i<aBtn.length;i++){
		//自定义属性index. 定义索引值获取 0,1,2
		aBtn[i].index=i;
		
		aBtn[i].onclick=function(){
			//alert(this.index);
			//alert(arr[this.index]);
			this.value=arr[this.index];
			
			ap[this.index].innerHTML=arr[this.index];
		}
	}
};
</script>
</head>

<body>

<input type="button" value="btn1" />
<input type="button" value="btn2" />
<input type="button" value="btn3" />
<p>A</p>
<p>B</p>
<p>C</p>
</body>
</html>