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 相关文章推荐
IE8下关于querySelectorAll()的问题
May 13 Javascript
js实现ArrayList功能附实例代码
Oct 29 Javascript
javascript使用smipleChart实现简单图表
Jan 02 Javascript
Bootstrap所支持的表单控件实例详解
May 16 Javascript
不使用script导入js文件的几种方法
Oct 27 Javascript
微信小程序 scroll-view隐藏滚动条详解
Jan 16 Javascript
用file标签实现多图文件上传预览
Feb 14 Javascript
详解angularJS自定义指令间的相互交互
Jul 05 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
AngularJS发送异步Get/Post请求方法
Aug 13 Javascript
基于Vue实现电商SKU组合算法问题
May 29 Javascript
JS实现容器模块左右拖动效果
Jan 14 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 fread()使用技巧
2010/01/22 PHP
php页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
asp.net和php的区别点总结
2019/10/10 PHP
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
2010/10/18 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
2013/11/18 Javascript
js类式继承的具体实现方法
2013/12/31 Javascript
JavaScript中的prototype.bind()方法介绍
2014/04/04 Javascript
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
2016/01/08 Javascript
AngularJS中处理多个promise的方式
2016/02/02 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
2016/12/28 Javascript
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
关于Mac下安装nodejs、npm和cnpm的教程
2018/04/11 NodeJs
小程序的上传文件接口的注意要点解析
2019/09/17 Javascript
使用typescript快速开发一个cli的实现示例
2020/12/09 Javascript
[28:57]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/16 DOTA
python将图片文件转换成base64编码的方法
2015/03/14 Python
Python 多进程和数据传递的理解
2017/10/09 Python
Numpy array数据的增、删、改、查实例
2018/06/04 Python
python3+opencv3识别图片中的物体并截取的方法
2018/12/05 Python
pandas实现将dataframe满足某一条件的值选出
2019/06/12 Python
python3.x提取中文的正则表达式示例代码
2019/07/23 Python
python标记语句块使用方法总结
2019/08/05 Python
python GUI库图形界面开发之PyQt5动态(可拖动控件大小)布局控件QSplitter详细使用方法与实例
2020/03/06 Python
keras输出预测值和真实值方式
2020/06/27 Python
Python如何定义有默认参数的函数
2020/08/10 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
房屋租赁意向书
2014/04/01 职场文书
班级学习计划书
2014/04/27 职场文书
信访工作经验交流材料
2014/05/23 职场文书
党的群众路线教育实践活动总结报告
2014/07/03 职场文书
房屋转让协议书
2014/10/18 职场文书
初婚初育证明范本
2015/06/18 职场文书
《天使的翅膀》读后感3篇
2019/12/20 职场文书
Python3接口性能测试实例代码
2021/06/20 Python