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 setTimeout和setInterval计时的区别详解
Jun 21 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
Nov 07 Javascript
JavaScript拆分字符串时产生空字符的解决方案
Sep 26 Javascript
javascript结合Canvas 实现简易的圆形时钟
Mar 11 Javascript
jQuery实现固定在网页顶部的菜单效果代码
Sep 02 Javascript
JavaScript如何禁止Backspace键
Dec 02 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
Jan 21 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
Vue的elementUI实现自定义主题方法
Feb 23 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
Oct 09 Javascript
Bootstrap Paginator+PageHelper实现分页效果
Dec 29 Javascript
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
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
打造计数器DIY三步曲(中)
2006/10/09 PHP
php读取csv实现csv文件下载功能
2013/12/18 PHP
php 从一个数组中随机的取出若干个不同的数实例
2016/12/31 PHP
javascript天然的迭代器
2010/10/29 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
2014 年最热门的21款JavaScript框架推荐
2014/12/25 Javascript
js中函数声明与函数表达式
2015/06/03 Javascript
js实现仿阿里巴巴城市选择框效果实例
2015/06/24 Javascript
JS简单限制textarea内输入字符数量的方法
2015/10/14 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
2015/12/18 Javascript
浅谈javascript中的call、apply、bind
2016/03/06 Javascript
纯原生js实现table表格的增删
2017/01/05 Javascript
原生javascript上传图片带进度条【实例分享】
2017/04/06 Javascript
详解Angular2 关于*ngFor 嵌套循环
2017/05/22 Javascript
页面内锚点定位及跳转方法总结(推荐)
2019/04/24 Javascript
微信小程序封装自定义弹窗的实现代码
2019/05/08 Javascript
js console.log打印对象时属性缺失的解决方法
2019/05/23 Javascript
layui prompt 设置允许空白提交的方法
2019/09/24 Javascript
JS模拟实现京东快递单号查询
2020/11/30 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
2020/12/28 Javascript
Python中无限元素列表的实现方法
2014/08/18 Python
Django静态资源URL STATIC_ROOT的配置方法
2014/11/08 Python
Python基于回溯法解决01背包问题实例
2017/12/06 Python
用matplotlib画等高线图详解
2017/12/14 Python
python 调用钉钉机器人的方法
2019/02/20 Python
Python API 自动化实战详解(纯代码)
2019/06/11 Python
代码实例讲解python3的编码问题
2019/07/08 Python
解决Django提交表单报错:CSRF token missing or incorrect的问题
2020/03/13 Python
django使用F方法更新一个对象多个对象字段的实现
2020/03/28 Python
虚拟环境及venv和virtualenv的区别说明
2021/02/05 Python
YSL圣罗兰美妆美国官网:Yves Saint Lauret US
2016/11/21 全球购物
马来西亚户外装备商店:PTT Outdoor
2019/07/13 全球购物
如何写出高质量、高性能的MySQL查询
2014/11/17 面试题
大一新生学期自我评价
2014/04/09 职场文书
公司租房协议书范本
2014/10/08 职场文书
围城读书笔记
2015/06/26 职场文书