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 AJAX 框架的使用方法
Nov 03 Javascript
js实现全屏漂浮广告移入光标停止移动
Dec 02 Javascript
JS图片无缝、平滑滚动代码
Mar 11 Javascript
js仿黑客帝国字母掉落效果代码分享
Nov 08 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
Mar 18 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
Nov 25 Javascript
基于JQuery的购物车添加删除以及结算功能示例
Mar 08 Javascript
Node.js中的http请求客户端示例(request client)
May 04 Javascript
Vue2.x中的Render函数详解
May 30 Javascript
react-router JS 控制路由跳转实例
Jun 15 Javascript
Vue中的slot使用插槽分发内容的方法
Mar 01 Javascript
vue实现商品列表的添加删除实例讲解
May 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
地球防卫队:陪着奥特曼打小怪兽的人类力量 那些经典队服
2020/03/08 日漫
解析php时间戳与日期的转换
2013/06/06 PHP
经典PHP加密解密函数Authcode()修复版代码
2015/04/05 PHP
在html页面上拖放移动标签
2010/01/08 Javascript
jquery获取div宽度的实现思路与代码
2013/01/13 Javascript
artdialog的图片/标题以及关闭按钮不显示的解决方法
2013/06/27 Javascript
js实现点击图片改变页面背景图的方法
2015/02/28 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
2015/03/26 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
JS实现的页面自定义滚动条效果
2015/10/26 Javascript
基于JS代码实现实时显示系统时间
2016/06/16 Javascript
完美实现八种js焦点轮播图(下篇)
2020/04/20 Javascript
Bootstrap Table使用方法解析
2016/10/19 Javascript
JavaScript实现一个空中避难的小游戏
2017/06/06 Javascript
深入理解vue Render函数
2017/07/19 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
2018/01/09 Javascript
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
vue解决弹出蒙层滑动穿透问题的方法
2018/09/22 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
2019/04/02 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
2019/04/08 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
2019/05/22 Javascript
Vue路由对象属性 .meta $route.matched详解
2019/11/04 Javascript
Python利用pyHook实现监听用户鼠标与键盘事件
2014/08/21 Python
Python编程之属性和方法实例详解
2015/05/19 Python
Python循环语句之break与continue的用法
2015/10/14 Python
深入理解Python3中的http.client模块
2017/03/29 Python
致Python初学者 Anaconda入门使用指南完整版
2018/04/05 Python
python实现多线程网页下载器
2018/04/15 Python
Python3.6.2调用ffmpeg的方法
2019/01/10 Python
Conforama瑞士:家具、厨房、电器、装饰
2020/09/06 全球购物
怎样写好自我评价呢?
2014/02/16 职场文书
《小儿垂钓》教学反思
2014/02/23 职场文书
2015年元旦文艺汇演主持词
2014/03/26 职场文书
redis使用不当导致应用卡死bug的过程解析
2021/07/01 Redis
Java字符串逆序方法详情
2022/03/21 Java/Android
《极主夫道》真人电影正式预告 定档6月3日上映
2022/04/05 日漫