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 相关文章推荐
Javascript表格翻页效果的具体实现
Oct 05 Javascript
AngularJS进行性能调优的7个建议
Dec 28 Javascript
原生js三级联动的简单实现代码
Jun 07 Javascript
json实现添加、遍历与删除属性的方法
Jun 17 Javascript
快速掌握jQuery插件开发
Jan 19 Javascript
基于JS实现仿百度百家主页的轮播图效果
Mar 06 Javascript
Node.js中的require.resolve方法使用简介
Apr 23 Javascript
vue监听scroll的坑的解决方法
Sep 07 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
Jan 10 Javascript
利用vue和element-ui设置表格内容分页的实例
Mar 02 Javascript
详解JavaScript中精度失准问题及解决方法
Feb 04 Javascript
在vue-cli创建的项目中使用sass操作
Aug 10 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简单系统查询模块代码打包下载
2008/06/07 PHP
php一次性删除前台checkbox多选内容的方法
2013/09/22 PHP
php判断手机访问还是电脑访问示例分享
2014/01/20 PHP
PHP 7的一些引人注目的新特性简单介绍
2015/11/08 PHP
PHP使用mysql与mysqli连接Mysql数据库用法示例
2016/07/07 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
php 输出缓冲 Output Control用法实例详解
2020/03/03 PHP
json 定义
2008/06/10 Javascript
JQuery实现简单时尚快捷的气泡提示插件
2012/12/20 Javascript
一个封装js代码-----展开收起效果示例
2013/07/03 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
ANGULARJS中使用JQUERY分页控件
2015/09/16 Javascript
jQuery入门之层次选择器实例简析
2015/12/11 Javascript
jquery实现倒计时效果
2015/12/14 Javascript
详解Node.js中的事件机制
2016/09/22 Javascript
JS中事件冒泡和事件捕获介绍
2016/12/13 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
VUE使用vuex解决模块间传值问题的方法
2017/06/01 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
2017/11/20 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
2018/03/06 Javascript
Less 安装及基本用法
2018/05/05 Javascript
Python黑魔法@property装饰器的使用技巧解析
2016/06/16 Python
Python通过RabbitMQ服务器实现交换机功能的实例教程
2016/06/29 Python
python requests 使用快速入门
2017/08/31 Python
Python中的默认参数实例分析
2018/01/29 Python
Python数据分析之双色球统计单个红和蓝球哪个比例高的方法
2018/02/03 Python
应用OpenCV和Python进行SIFT算法的实现详解
2019/08/21 Python
python百行代码自制电脑端网速悬浮窗的实现
2020/05/12 Python
韩国美国时尚服装和美容在线全球市场:KOODING
2018/11/07 全球购物
法院先进个人事迹材料
2014/05/04 职场文书
大学生求职信范文
2014/05/24 职场文书
幼儿园户外活动总结
2014/07/04 职场文书
陈安之励志演讲稿
2014/08/21 职场文书
幼儿园百日安全活动总结
2015/05/07 职场文书
Nginx配置之禁止指定IP访问
2022/05/02 Servers