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的文件是什么文件
Dec 06 Javascript
15条JavaScript最佳实践小结
Aug 09 Javascript
使用jquery的ajax需要注意的地方dataType的设置
Aug 12 Javascript
javascript 函数及作用域总结介绍
Nov 12 Javascript
通过JS来判断页面控件是否获取焦点
Jan 03 Javascript
兼容主流浏览器的JS复制内容到剪贴板
Dec 12 Javascript
利用Node.JS实现邮件发送功能
Oct 21 Javascript
移动端点击态处理的三种实现方式
Jan 12 Javascript
javascript实现二叉树遍历的代码
Jun 08 Javascript
在Vue组件上动态添加和删除属性方法
Feb 23 Javascript
详解如何从零开始搭建Express+Vue开发环境
Jul 17 Javascript
微信小程序实现留言功能
Oct 31 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提取中英文词语以及数字的首字母的方法介绍
2013/04/23 PHP
PHP程序级守护进程的实现与优化的使用概述
2013/05/02 PHP
解析php中的escape函数
2013/06/29 PHP
List Installed Hot Fixes
2007/06/12 Javascript
js获取当前select 元素值的代码
2010/04/19 Javascript
新手常遇到的一些jquery问题整理
2010/08/16 Javascript
Jquery replace 字符替换实现代码
2010/12/02 Javascript
JavaScript mapreduce工作原理简析
2012/11/25 Javascript
JavaScript Split()方法
2015/12/18 Javascript
基于JavaScript实现回到页面顶部动画代码
2016/05/24 Javascript
用JS实现轮播图效果(二)
2016/06/26 Javascript
js无提示关闭浏览器窗口的两种方法分析
2016/11/06 Javascript
jQuery获取table表中的td标签(实例讲解)
2017/07/28 jQuery
jquery动态赋值id与动态取id方法示例
2017/08/21 jQuery
Angular 4.0学习教程之架构详解
2017/09/12 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
2017/12/29 Javascript
使用javascript做在线算法编程
2018/05/25 Javascript
微信小程序开发之自定义tabBar的实现
2018/09/06 Javascript
JS数组方法reverse()用法实例分析
2020/01/18 Javascript
vue.js this.$router.push获取不到params参数问题
2020/03/03 Javascript
js实现九宫格抽奖
2020/03/19 Javascript
python字符类型的一些方法小结
2016/05/16 Python
Python检测生僻字的实现方法
2016/10/23 Python
使用Python读取大文件的方法
2018/02/11 Python
python Tcp协议发送和接收信息的例子
2019/07/22 Python
使用python将微信image下.dat文件解密为.png的方法
2020/11/30 Python
CSS3 简单又实用的5个属性
2010/03/04 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
2019/10/08 HTML / CSS
新闻专业大学生找工作的自我评价
2013/10/30 职场文书
工地门卫岗位职责
2013/12/30 职场文书
就业意向协议书
2015/01/29 职场文书
广播体操比赛主持词
2015/06/29 职场文书
素质教育培训心得体会
2016/01/19 职场文书
2016小学优秀教师先进事迹材料
2016/02/26 职场文书
不会写演讲稿,快来看看这篇文章!
2019/08/06 职场文书
MySQL基础快速入门知识总结(附思维导图)
2021/09/25 MySQL