主页 / 网络编程 /

javascript实现点击后变换按钮显示文字的方法

网络编程 2021-07-04 21:48www.168986.cn编程入门
这篇文章主要介绍了javascript实现点击后变换按钮显示文字的方法,可实现显示一些按钮如果点击了,按钮文本变为“点了”,其他按钮文本变为“没点”的效果,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了javascript实现点击后变换按钮显示文字的方法。分享给大家供大家参考。具体实现方法如下

<html xmlns="http://.w3./1999/xhtml">
<head>
 <title>显示一些按钮，如果点击了，
 当前点击的按钮文本变为“点了”，其他按钮文本变为“没点”</title>
 <script type="text/javascript">
 //为所有按钮动态添加事件
 function IniButtonEvent() {
  var Items = document.getElementsByTagName("input");
  for (var i = 0; i < Items.length; i++) {
  var objTmp = Items[i];
  if (objTmp.type == "button") {
   objTmp.onclick = ButtonClick;
  }
  }
 }
 function ButtonClick() {
  var Items = document.getElementsByTagName("input");
  for (var i = 0; i < Items.length; i++) {
  var objTmp = Items[i];
  if (objTmp.type == "button") {
  //判断是否是按钮
   //window.event.srcElement触发当前事件的元素
   //用来判断是否是当前单击的按钮
   if (objTmp == window.event.srcElement) {
   objTmp.value = "点了";
   }
   else {
   objTmp.value = "没点";
   }
  }
  }
 }
 </script>
</head>
<body onload="IniButtonEvent()">
显示一些按钮，如果点击了，当前点击的按钮文本变为“点了”，
其他按钮文本变为“没点”<br />
 <input type="button" value="没点" />
 <input type="button" value="没点" />
 <input type="button" value="没点" />
 <input type="button" value="没点" />
 <input type="button" value="没点" />
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

上一篇：javascript实现模拟时钟的方法 下一篇：javascript实现十秒钟后注册按钮可点击的方法

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by