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的设计模式
Nov 22 Javascript
JS实现判断碰撞的方法
Feb 11 Javascript
基于jQuery创建鼠标悬停效果的方法
Mar 07 Javascript
jQuery选择器源码解读(二):select方法
Mar 31 Javascript
js如何实现点击标签文字,文字在文本框出现
Aug 05 Javascript
JS实现图片的不间断连续滚动的简单实例
Jun 03 Javascript
jQuery简单实现title提示效果示例
Aug 01 Javascript
详解vue的数据binding绑定原理
Apr 12 Javascript
Angular自定义组件实现数据双向数据绑定的实例
Dec 11 Javascript
node.js到底要不要加分号浅析
Jul 11 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
May 12 Javascript
ant-design-vue中tree增删改的操作方法
Nov 03 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编写daemon process 实例详解
2016/11/13 PHP
微信公众平台开发教程①获取用户Openid及个人信息图文详解
2019/04/10 PHP
js+xml生成级联下拉框代码
2012/07/24 Javascript
jquery鼠标停止移动事件
2013/12/21 Javascript
js实现身份证号码验证的简单实例
2014/02/19 Javascript
Nodejs学习笔记之测试驱动
2015/04/16 NodeJs
利用node.js本地搭建HTTP服务器
2017/04/19 Javascript
JS开发中基本数据类型具体有哪几种
2017/10/19 Javascript
利用hasOwnProperty给数组去重的面试题分享
2018/11/05 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
2019/06/27 Javascript
jQuery实现简单飞机大战
2020/07/05 jQuery
Vue实现鼠标经过文字显示悬浮框效果的示例代码
2020/10/14 Javascript
[01:03:56]Mineski vs TNC 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python Dataframe 指定多列去重、求差集的方法
2018/07/10 Python
python实现简单的单变量线性回归方法
2018/11/08 Python
wxPython实现带颜色的进度条
2019/11/19 Python
Python for循环与getitem的关系详解
2020/01/02 Python
Python类继承和多态原理解析
2020/02/05 Python
TensorFlow tf.nn.softmax_cross_entropy_with_logits的用法
2020/04/19 Python
python中Mako库实例用法
2020/12/31 Python
使用CSS3 制作一个material-design 风格登录界面实例
2016/12/12 HTML / CSS
迪梵英国官方网站:Darphin英国
2017/12/06 全球购物
北美个性化礼品商店:Things Remembered
2018/06/12 全球购物
Agoda中文官网:安可达(低价预订全球酒店)
2021/01/18 全球购物
大学生求职简历的自我评价
2013/10/21 职场文书
高校教师思想汇报
2014/01/11 职场文书
求职简历的自我评价
2014/01/31 职场文书
渡河少年教学反思
2014/02/12 职场文书
各营销点岗位职责范本
2014/03/05 职场文书
美丽家庭事迹材料
2014/05/03 职场文书
工作求职信
2014/07/04 职场文书
法人委托书的范本格式
2014/09/11 职场文书
职工年度考核评语
2014/12/31 职场文书
幼儿园感谢信
2015/01/21 职场文书
寻找成龙观后感
2015/06/12 职场文书
浅谈sql_@SelectProvider及使用注意说明
2021/08/04 Java/Android