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实现下拉菜单效果的代码
Jul 25 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
May 06 Javascript
zTree插件之单选下拉菜单实例代码
Nov 07 Javascript
原生javascript实现DIV拖拽并计算重复面积
Jan 02 Javascript
jQuery实现的多屏图像图层切换效果实例
May 07 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
Jul 09 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
Sep 16 Javascript
Vue.js图片预览插件使用详解
Aug 27 Javascript
JS+php后台实现文件上传功能详解
Mar 02 Javascript
layui use 定义js外部引用函数的方法
Sep 26 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
Jul 09 Javascript
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
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
深入HTTP响应状态码速查表的详解
2013/06/07 PHP
php下载excel无法打开的解决方法
2013/12/24 PHP
PHPThumb图片处理实例
2014/05/03 PHP
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
php正则表达式获取内容所有链接
2015/07/24 PHP
详解PHP中websocket的使用方法
2016/09/15 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
jquery实现metro效果示例代码
2013/09/06 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
JavaScript中Math.SQRT2属性的使用详解
2015/06/14 Javascript
详解JavaScript语言的基本语法要求
2015/11/20 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
2016/08/17 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
2017/02/26 Javascript
微信小程序 设置启动页面的两种方法
2017/03/09 Javascript
jQuery实现移动端Tab选项卡效果
2017/03/15 Javascript
JS控件bootstrap datepicker使用方法详解
2017/03/25 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
jQuery实现菜单栏导航效果
2017/08/15 jQuery
Vue.js分页组件实现:diVuePagination的使用详解
2018/01/10 Javascript
vue实现百度语音合成的实例讲解
2019/10/14 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
2019/12/13 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
[01:04:20]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.29
2020/12/02 DOTA
Python提取Linux内核源代码的目录结构实现方法
2016/06/24 Python
Python 3中的yield from语法详解
2017/01/18 Python
对pycharm代码整体左移和右移缩进快捷键的介绍
2018/07/16 Python
对TensorFlow中的variables_to_restore函数详解
2018/07/30 Python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
2019/08/06 Python
python扫描线填充算法详解
2020/02/19 Python
Club Monaco加拿大官网:设计师男女服装
2019/09/29 全球购物
天网工程实施方案
2014/03/26 职场文书
团队口号大全
2014/06/06 职场文书
领导干部民主生活会自我剖析材料范文
2014/09/20 职场文书
2014年领班工作总结
2014/11/25 职场文书
Python 如何解决稀疏矩阵运算
2021/05/26 Python
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android