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 相关文章推荐
jQuery.validate 常用方法及需要注意的问题
Mar 20 Javascript
Javascript实现获取窗口的大小和位置代码分享
Dec 04 Javascript
jquery实现兼容IE8的异步上传文件
Jun 15 Javascript
javascript封装 Cookie 应用接口
Aug 07 Javascript
JS获取地址栏参数的两种方法(简单实用)
Jun 14 Javascript
基于JS实现导航条flash导航条
Jun 17 Javascript
基于js实现二级下拉联动
Dec 17 Javascript
基于jQuery实现照片墙自动播放特效
Jan 12 Javascript
JS实现汉字与Unicode码相互转换的方法详解
Apr 28 Javascript
Angular实现表单验证功能
Nov 13 Javascript
js继承的这6种方式!(上)
Apr 23 Javascript
JS实现时间校验的代码
May 25 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
阿拉伯的咖啡与水烟
2021/03/03 咖啡文化
php 异常处理实现代码
2009/03/10 PHP
PHP setcookie指定domain参数后,在IE下设置cookie失效的解决方法
2011/09/09 PHP
PHP程序员常见的40个陋习,你中了几个?
2014/11/20 PHP
PHP图像识别技术原理与实现
2016/10/27 PHP
PHP实现删除多重数组对象属性并重新赋值的方法
2017/06/07 PHP
JS获取url链接字符串 location.href
2013/12/23 Javascript
javascript实现倒计时N秒后网页自动跳转代码
2014/12/11 Javascript
javascript实现动态加载CSS
2015/01/26 Javascript
浅谈javascript中自定义模版
2015/01/29 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
2015/10/08 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
2016/04/29 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
Angular.js基础学习之初始化
2017/03/10 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
js学习总结_选项卡封装(实例讲解)
2017/07/13 Javascript
js实现会跳动的日历效果(完整实例)
2017/10/18 Javascript
jQuery 移除事件的方法
2020/06/20 jQuery
Python 解析XML文件
2009/04/15 Python
深入浅出分析Python装饰器用法
2017/07/28 Python
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
详解js文件通过python访问数据库方法
2019/03/03 Python
基于python解线性矩阵方程(numpy中的matrix类)
2019/10/21 Python
pytorch读取图像数据转成opencv格式实例
2020/06/02 Python
python获取整个网页源码的方法
2020/08/03 Python
html5 touch事件实现触屏页面上下滑动(二)
2016/03/10 HTML / CSS
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
2020/04/07 HTML / CSS
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
视光学毕业生自荐书范文
2014/02/13 职场文书
感谢信范文大全
2015/01/23 职场文书
民事撤诉申请书范本
2015/05/18 职场文书
实习单位鉴定意见
2015/06/04 职场文书
nginx请求限制配置方法
2021/07/09 Servers
Python获取江苏疫情实时数据及爬虫分析
2021/08/02 Python
Android Rxjava3 使用场景详解
2022/04/07 Java/Android