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


Posted in Javascript onMay 13, 2015

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

<html xmlns="http://www.w3.org/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 相关文章推荐
通过JS获取用户本地图片路径并显示的代码
Feb 16 Javascript
js实现同一个页面多个渐变效果的方法
Apr 10 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
Jun 10 Javascript
javascript仿百度输入框提示自动下拉补全
Jan 07 Javascript
js判断登陆用户名及密码是否为空的简单实例
May 16 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
Nov 02 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
Jul 13 Javascript
JSON数据中存在单个转义字符“\”的处理方法
Jul 11 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
Mar 15 Javascript
p5.js绘制创意自画像
Nov 04 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
Nov 12 Javascript
浅谈JavaScript中this的指向更改
Jul 28 Javascript
javascript实现十秒钟后注册按钮可点击的方法
May 13 #Javascript
javascript中clipboardData对象用法详解
May 13 #Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
May 13 #Javascript
浅谈jQuery中replace()方法
May 13 #Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 #Javascript
JS实现模拟风力的雪花飘落效果
May 13 #Javascript
JavaScript实现鼠标点击后层展开效果的方法
May 13 #Javascript
You might like
PHP中call_user_func_array回调函数的用法示例
2016/11/26 PHP
PHP进制转换实例分析(2,8,16,36,64进制至10进制相互转换)
2017/02/04 PHP
Laravel实现搜索的时候分页并携带参数
2019/10/15 PHP
Jquery 设置标题的自动翻转
2009/10/03 Javascript
JS正则验证邮箱的格式详细介绍
2013/11/19 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
2015/01/28 Javascript
jQuery+Ajax实现限制查询间隔的方法
2016/06/07 Javascript
Vue实现类似Spring官网图片滑动效果方法
2019/03/01 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
VUE 解决mode为history页面为空白的问题
2019/11/01 Javascript
[01:27:30]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python3.3使用tkinter开发猜数字游戏示例
2014/03/14 Python
python统计一个文本中重复行数的方法
2014/11/19 Python
python实现多线程的方式及多条命令并发执行
2016/06/07 Python
Linux上安装Python的PIL和Pillow库处理图片的实例教程
2016/06/23 Python
Python金融数据可视化汇总
2017/11/17 Python
python数字图像处理之高级滤波代码详解
2017/11/23 Python
神经网络python源码分享
2017/12/15 Python
mvc框架打造笔记之wsgi协议的优缺点以及接口实现
2018/08/01 Python
python list格式数据excel导出方法
2018/10/31 Python
Python通过paramiko远程下载Linux服务器上的文件实例
2018/12/27 Python
局域网内python socket实现windows与linux间的消息传送
2019/04/19 Python
Python开发之pip安装及使用方法详解
2020/02/21 Python
Python OpenCV去除字母后面的杂线操作
2020/07/05 Python
python Timer 类使用介绍
2020/12/28 Python
HTML5调用手机摄像头拍照的实现思路及代码
2014/06/15 HTML / CSS
全天然狗零食:Best Bully Sticks
2016/09/22 全球购物
植村秀美国官网:Shu Uemura美国
2019/03/19 全球购物
家长对老师的感言
2014/03/11 职场文书
股东合作协议书范本
2014/04/14 职场文书
大学生工作自荐书
2014/06/16 职场文书
2014年大学生职业规划书:未来不是梦,只要勇敢冲!
2014/09/22 职场文书
劳模先进事迹材料
2014/12/24 职场文书
2015年宣传工作总结
2015/04/08 职场文书
实验室安全管理制度
2015/08/05 职场文书
python分分钟绘制精美地图海报
2022/02/15 Python