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 CSS选择器笔记
Mar 29 Javascript
动态调用CSS文件的JS代码
Jul 29 Javascript
autoIMG 基于jquery的图片自适应插件代码
Mar 12 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
Jan 26 Javascript
基于javascript实现checkbox复选框实例代码
Jan 28 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
Apr 17 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
Jun 06 Javascript
基于jQuery实现Tabs选项卡自定义插件
Nov 21 Javascript
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
JS实现li标签的删除
Apr 12 Javascript
vue 获取元素额外生成的data-v-xxx操作
Sep 09 Javascript
Javascript中Microtask和Macrotask鲜为人知的知识点
Apr 02 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数据类型的总结分析
2013/06/13 PHP
PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例
2018/05/23 PHP
PHP中mysqli_get_server_version()的实例用法
2020/02/03 PHP
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
JS 跳转页面延迟2种方法
2013/03/29 Javascript
jQuery提示效果代码分享
2014/11/20 Javascript
javascript解三阶幻方(九宫格)
2015/04/22 Javascript
JS+CSS实现的蓝色table选项卡效果
2015/10/08 Javascript
js实现不重复导入的方法
2016/03/02 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
2016/05/15 Javascript
jQuery 全选 全部选 反选 实现代码
2016/08/17 Javascript
Jquery删除css属性的简单方法
2016/12/04 Javascript
微信小程序 wx:for的使用实例详解
2017/04/27 Javascript
微信小程序实现团购或秒杀批量倒计时
2020/11/01 Javascript
vue中npm包全局安装和局部安装过程
2019/09/03 Javascript
解决layui动态加载复选框无法选中的问题
2019/09/20 Javascript
Python 爬取携程所有机票的实例代码
2018/06/11 Python
flask中的wtforms使用方法
2018/07/21 Python
使用Selenium破解新浪微博的四宫格验证码
2018/10/19 Python
python将print输出的信息保留到日志文件中
2019/09/27 Python
Python3利用scapy局域网实现自动多线程arp扫描功能
2021/01/21 Python
HTML5中的强制下载属性download使用实例解析
2016/05/12 HTML / CSS
精彩的推荐信范文
2013/11/26 职场文书
高中政治教学反思
2014/01/18 职场文书
物理力学求职信
2014/02/18 职场文书
洗发水广告词
2014/03/13 职场文书
中药学专业毕业生推荐信
2014/07/10 职场文书
个人遵守党的政治纪律情况对照检查材料思想汇报
2014/09/25 职场文书
常务副县长“四风”个人对照检查材料思想汇报
2014/10/02 职场文书
2014年除四害工作总结
2014/12/06 职场文书
中学推普周活动总结
2015/05/07 职场文书
指导老师鉴定意见
2015/06/05 职场文书
办公室卫生管理制度
2015/08/04 职场文书
读完《骆驼祥子》的观后感!
2019/07/05 职场文书
Go语言使用select{}阻塞main函数介绍
2021/04/25 Golang