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 相关文章推荐
safari,opera嵌入iframe页面cookie读取问题解决方法
Jun 23 Javascript
jQuery 1.8 Release版本发布了
Aug 14 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
Jul 25 Javascript
扒一扒JavaScript 预解释
Jan 28 Javascript
Node.js自定义实现文件路由功能
Sep 22 Javascript
微信小程序基于本地缓存实现点赞功能的方法
Dec 18 Javascript
Vue进度条progressbar组件功能
Apr 17 Javascript
小程序实现抽奖动画
Apr 16 Javascript
js删除数组中某几项的方法总结
Jan 16 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
Sep 05 Javascript
京东优选小程序的实现代码示例
Feb 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
php 远程图片保存到本地的函数类
2008/12/08 PHP
PHP utf-8编码问题,utf8编码,数据库乱码,页面显示输出乱码
2013/04/08 PHP
解析PHP中$_FILES的使用以及注意事项
2013/07/05 PHP
php根据一个给定范围和步进生成数组的方法
2015/06/19 PHP
php实现查询功能(数据访问)
2017/05/23 PHP
一个基于jquery的图片切换效果
2010/07/06 Javascript
使用js完成节点的增删改复制等的操作
2014/01/02 Javascript
js实现文字在按钮上滚动的方法
2015/08/20 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
2015/11/30 Javascript
easyui-combobox 实现简单的自动补全功能示例
2016/11/08 Javascript
js oncontextmenu事件使用详解
2017/03/25 Javascript
nodejs+websocket实时聊天系统改进版
2017/05/18 NodeJs
js中el表达式的使用和非空判断方法
2018/03/28 Javascript
React如何避免重渲染
2018/04/10 Javascript
vue调试工具vue-devtools安装及使用方法
2018/11/07 Javascript
JavaScript实现单英文金山打字通
2020/07/24 Javascript
多个vue子路由文件自动化合并的方法
2019/09/03 Javascript
JavaScript数组去重实现方法小结
2020/01/17 Javascript
Python中__init__和__new__的区别详解
2014/07/09 Python
python进程管理工具supervisor使用实例
2014/09/17 Python
python判断一个数是否能被另一个整数整除的实例
2018/12/12 Python
django获取from表单multiple-select的value和id的方法
2019/07/19 Python
django项目简单调取百度翻译接口的方法
2019/08/06 Python
Python 实现一个手机号码获取妹子名字的功能
2019/09/25 Python
python实现百度OCR图片识别过程解析
2020/01/17 Python
Python3使用腾讯云文字识别(腾讯OCR)提取图片中的文字内容实例详解
2020/02/18 Python
keras中的History对象用法
2020/06/19 Python
纯CSS3发光分享按钮的实现教程
2014/09/06 HTML / CSS
阿迪达斯法国官方网站:adidas法国
2018/03/20 全球购物
仓管员岗位职责范文
2013/11/08 职场文书
小学敬老月活动方案
2014/02/11 职场文书
加薪申请报告范本
2015/05/15 职场文书
公诉意见书范文
2015/06/05 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书
比较几种Redis集群方案
2021/06/21 Redis
Win11右下角图标点了没反应怎么办?Win11点击右下角图标无反应解决方法汇总
2022/07/07 数码科技