js小案例按钮排它功能

最新推荐文章于 2022-07-30 11:47:24 发布

林剑南

最新推荐文章于 2022-07-30 11:47:24 发布

阅读量360

点赞数

CC 4.0 BY-SA版权

分类专栏： js案例文章标签： js按钮排他案例

本文链接：https://blog.youkuaiyun.com/u014414110/article/details/87791210

js案例专栏收录该内容

35 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现按钮点击事件的方法，当点击按钮时，按钮上的文字会从'显示效果'变为'效果好'。通过获取页面上所有的按钮元素并为其注册点击事件，实现了对按钮文字的动态修改。

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

一、效果
点击按钮文字改变
在这里插入图片描述
二、代码

	<input type="button" value="显示效果" />
	<input type="button" value="显示效果" />
	<input type="button" value="显示效果" />
	<input type="button" value="显示效果" />
	<input type="button" value="显示效果" />
	<input type="button" value="显示效果" />
	<script>
			//获取所有的按钮，分别注册事件
			console.log(1)
			var docu=document.getElementsByTagName("input");
			//遍历所有按钮
			for (var i=0;i<docu.length;i++) {
				//为每个按钮注册点击事件
				docu[i].onclick=function(){
					//把所有按钮的value值设置为默认值
					for (var j=0;j<docu.length;j++) {
						docu[j].value="显示效果";
					}
					//当前被点击按钮设置为“”
					this.value="效果好"
					//docu[i].value="jjjj";
					//为什么不用docu[i].value
					/*for (var i=0;i<5;i++) {
						console.log(i);//打印出结果是，0，1，2，3，4
					}
					console.log(i);//事件触发时执行打印出结果 5*/
				}
			}
	</script>
</body>

容易错的地方
在这里插入图片描述