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 相关文章推荐
破解Session cookie的方法
Jul 28 Javascript
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
May 14 Javascript
用js查找法实现当前栏目的高亮显示的代码
Nov 24 Javascript
jquery 动态创建元素的方式介绍及应用
Apr 21 Javascript
Javascript页面添加到收藏夹的简单方法
Aug 07 Javascript
jquery实现按Enter键触发事件示例
Sep 10 Javascript
利用jquery写的左右轮播图特效
Feb 12 Javascript
JavaScript实现简单的数字倒计时
May 15 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
Sep 05 Javascript
JS实现的RGB网页颜色在线取色器完整实例
Dec 21 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
Dec 25 Javascript
React Native项目框架搭建的一些心得体会
May 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
在线短消息收发的程序,不用数据库
2006/10/09 PHP
PHP 程序员应该使用的10个组件
2009/10/31 PHP
深入array multisort排序原理的详解
2013/06/18 PHP
PHP中Session可能会引起并发问题
2015/06/26 PHP
谈谈从phpinfo中能获取哪些值得注意的信息
2017/03/28 PHP
php DES加密算法实例分析
2019/09/18 PHP
javascript使用activex控件的代码
2011/01/27 Javascript
JavaScript与DOM组合动态创建表格实例
2012/12/23 Javascript
如何解决Jquery库及其他库之间的$命名冲突
2013/09/15 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
2016/05/23 Javascript
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
js阻止冒泡和默认事件(默认行为)详解
2016/10/20 Javascript
URL中“#” “?” &amp;“”号的作用浅析
2017/02/04 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
2017/03/03 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
利用vue组件自定义v-model实现一个Tab组件方法示例
2017/12/06 Javascript
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
2018/12/13 Javascript
js实现无缝滚动双图切换效果
2019/07/09 Javascript
[04:29]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/02/01 DOTA
Python栈类实例分析
2015/06/15 Python
教你用Python脚本快速为iOS10生成图标和截屏
2016/09/22 Python
Django Admin 实现外键过滤的方法
2017/09/29 Python
Python如何实现转换URL详解
2019/07/02 Python
Python阶乘求和的代码详解
2020/02/14 Python
浅谈Python中文件夹和python package包的区别
2020/06/01 Python
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
创业资金计划书
2014/02/06 职场文书
2015年工会工作总结
2015/03/30 职场文书
拿破仑传读书笔记
2015/07/01 职场文书
高中生社会实践心得体会
2016/01/14 职场文书
php解析非标准json、非规范json的方式实例
2022/05/10 PHP
Linux服务器离线安装 nginx的详细步骤
2022/06/16 Servers
win10怎么设置右下角图标不折叠?Win10设置右下角图标不折叠的方法
2022/07/15 数码科技