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 相关文章推荐
如何用js控制css中的float的代码
Aug 16 Javascript
js给selected添加options的方法
May 06 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
Nov 02 Javascript
BootStrap 实现各种样式的进度条效果
Dec 07 Javascript
微信小程序 JS动态修改样式的实现代码
Feb 10 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
Mar 14 Javascript
微信小程序动态添加分享数据
Jun 14 Javascript
vue实例中data使用return包裹的方法
Aug 27 Javascript
JS实现点击拉拽轮播图pc端移动端适配
Sep 05 Javascript
说说如何在Vue.js中实现数字输入组件的方法
Jan 08 Javascript
javascript判断一个变量是数组还是对象
Apr 10 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
Apr 30 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
js 跨域和ajax 跨域问题小结
2009/07/01 Javascript
javascript json 新手入门文档
2009/12/03 Javascript
JS获取并操作iframe中元素的方法
2013/03/21 Javascript
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
jquery实现带二级菜单的导航示例
2014/04/28 Javascript
js动态添加表格数据使用insertRow和insertCell实现
2014/05/22 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
JavaScript File API文件上传预览
2016/02/02 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
JSON与XML的区别对比及案例应用
2016/11/11 Javascript
如何使用headjs来管理和异步加载js
2016/11/29 Javascript
浅谈webpack SplitChunksPlugin实用指南
2018/09/17 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
2020/06/04 Javascript
javascript实现多边形碰撞检测
2020/10/24 Javascript
python使用win32com库播放mp3文件的方法
2015/05/30 Python
python3音乐播放器简单实现代码
2020/04/20 Python
python中利用Future对象异步返回结果示例代码
2017/09/07 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
2019/03/11 Python
python实践项目之监控当前联网状态详情
2019/05/23 Python
Python2与Python3的区别详解
2020/02/09 Python
Python手动或自动协程操作方法解析
2020/06/22 Python
css3实现动画的三种方式
2020/08/24 HTML / CSS
Speedo美国:澳大利亚顶尖泳衣制造商
2016/08/03 全球购物
荷兰网上鞋店:Ziengs.nl
2017/01/02 全球购物
全球高级音频和视频专家:HiDef Lifestyle
2019/08/02 全球购物
Jones New York官网:美国女装品牌,受白领女性欢迎
2019/11/26 全球购物
彪马法国官网:PUMA法国
2019/12/15 全球购物
StubHub中国:购买和出售全球活动门票
2020/01/01 全球购物
linux面试题参考答案(6)
2016/06/23 面试题
一份恶作剧的检讨书
2014/09/13 职场文书
学校师德师风自我剖析材料
2014/09/29 职场文书
2015新员工试用期工作总结
2014/12/12 职场文书
试用期旷工辞退通知书
2015/04/17 职场文书
MySQL下使用Inplace和Online方式创建索引的教程
2021/05/26 MySQL
使用jpa之动态插入与修改(重写save)
2021/11/23 Java/Android