javascript实现点击后变换按钮显示文字的方法

 更新时间:2015年05月13日 11:32:11   作者:永远爱好写程序  
这篇文章主要介绍了javascript实现点击后变换按钮显示文字的方法,可实现显示一些按钮如果点击了,按钮文本变为“点了”,其他按钮文本变为“没点”的效果,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

相关文章

  • zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题

    zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题

    Swipe JS 是一个轻量级的移动滑动组件,支持 1:1 的触摸移动,阻力以及防滑性能都不错,可以让移动web应用展现更多的内容,能解决我们对于移动Web对滑动的需求。下面小编给大家介绍zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题,需要朋友可以参考下
    2015-08-08
  • JS实现简单计数器

    JS实现简单计数器

    这篇文章主要为大家详细介绍了JS实现简单计数器,有加、减和零三个按钮,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • javascript实现在网页任意处点左键弹出隐藏菜单的方法

    javascript实现在网页任意处点左键弹出隐藏菜单的方法

    这篇文章主要介绍了javascript实现在网页任意处点左键弹出隐藏菜单的方法,设计鼠标事件及css样式操作的相关技巧,需要的朋友可以参考下
    2015-05-05
  • JavaScript DOM 添加事件

    JavaScript DOM 添加事件

    这是我在给库中添加事件的时候写的添加事件的方法!这个方法实现了跨浏览器之间的方法!
    2009-02-02
  • 怎么判断js脚本加载完成

    怎么判断js脚本加载完成

    本篇文章主要是对判断js脚本加载完成的方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • 一个JavaScript的求爱小特效

    一个JavaScript的求爱小特效

    本文做了一个JavaScript的求爱小特效,不仅能出现下面的图的效果,还可以让这个图形跟随着鼠标转动哦,需要的朋友可以参考下
    2014-05-05
  • 你必须知道的Javascript知识点之"深入理解作用域链"的介绍

    你必须知道的Javascript知识点之"深入理解作用域链"的介绍

    本篇文章小编为大家介绍,你必须知道的Javascript知识点之"深入理解作用域链"的介绍。需要的朋友参考下
    2013-04-04
  • JavaScript实现经典排序算法之冒泡排序

    JavaScript实现经典排序算法之冒泡排序

    这篇文章主要介绍了JavaScript实现经典排序算法之冒泡排序,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • JavaScript中Promise的使用详解

    JavaScript中Promise的使用详解

    Promise,相信每一个前端工程师都或多或少地在项目中都是用过,毕竟它早已不是一个新名词。ES6中已经原生对它加以支持,在caniuse中搜索一下 Promise ,发现新版的chrome和firefox也已经支持。但是低版本的浏览器我们可以使用 es6-promise 这个 polyfill 库来加以兼容。
    2017-02-02
  • JavaScript提高加载和执行效率的方法

    JavaScript提高加载和执行效率的方法

    JavaScript在浏览器中的性能成为开发者所面临的最重要的可用性问题。而这个问题又因JavaScript的阻塞特性变的复杂,也就是说当浏览器在执行JavaScript代码时,不能同时做其他任何事情。本文详细介绍了如何正确的加载和执行JavaScript代码,从而提高其在浏览器中的性能。
    2017-02-02

最新评论