脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS onclick事件实现单个按钮的编辑与保存

JS基于onclick事件实现单个按钮的编辑与保存功能示例

 更新时间：2017年02月13日 09:30:12   作者：风起从容  
这篇文章主要介绍了JS基于onclick事件实现单个按钮的编辑与保存功能,结合实例形式分析了JS实现onclick响应事件的转换相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了JS基于onclick事件实现单个按钮的编辑与保存功能。分享给大家供大家参考，具体如下：

该实例可以实现点击同一个按钮实现编辑和保存的功能：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test</title>
</head>
<body>
<span id="xs" >欢迎来到脚本之家！脚本之家提供专业的源码示例与素材下载！</span>
<textarea id="ei" style="display:none;width:300px;">欢迎来到脚本之家！脚本之家提供专业的源码示例与素材下载！</textarea>
<br/>
<input type="button" onclick="edit();" id="btt" name="btt" value="Edit" />
<script type="text/javascript" >
  //Edit content
  function edit(){
    document.getElementById("xs").style.display="none";
    document.getElementById("ei").style.display="";
    var butt=document.getElementById("btt");
    butt.value="Save";
    butt.onclick=function(){
      save();//第二次单击的时候执行这个函数
    };
  }
  //Save content
  function save(){
    var cxs=document.getElementById('xs');
    var ei=document.getElementById("ei");
    var butt=document.getElementById("btt");
    butt.value="Edit";
    ei.style.display="none";
    cxs.innerHTML=ei.value;
    cxs.style.display="";
    butt.onclick=function(){
      edit();//还原第一次单击的时候执行的函数
    };
  }
</script>
</body>
</html>

运行效果图如下：

PS:关于javascript常用事件及相关说明还可参考本站在线工具：

javascript事件与功能说明大全：
http://tools.jb51.net/table/javascript_event

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript事件相关操作与技巧大全》、《JavaScript操作DOM技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • JS对象创建的几种方式整理

    JS对象创建的几种方式整理

    本文主要介绍了JS对象创建的几种方式，具有很好的参考价值，下面跟着小编一起来看下吧
    2017-02-02
  • 基于rem的移动端响应式适配方案(详解)

    基于rem的移动端响应式适配方案(详解)

    下面小编就为大家带来一篇基于rem的移动端响应式适配方案(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • javascript模版引擎-tmpl的bug修复与性能优化分析

    javascript模版引擎-tmpl的bug修复与性能优化分析

    在平时编码中，经常要做拼接字符串的工作，如把json数据用HTML展示出来，以往字符串拼接与逻辑混在在一起会让代码晦涩不堪，加大了多人协作与维护的成本。而采用前端模板机制就能很好的解决这个问题
    2011-10-10
  • javascript中的replace函数(带注释demo)

    javascript中的replace函数(带注释demo)

    在js中有两个replace函数 一个是location.replace(url) 跳转到一个新的url.一个string.replace("xx","yy") 替换字符串 返回一个新的字符串，该方法并不改变字符串本身。下面通过本文给大家介绍javascript中的replace函数
    2018-01-01
  • js自动生成的元素与页面原有元素发生堆叠的解决方法

    js自动生成的元素与页面原有元素发生堆叠的解决方法

    js自动生成的元素与页面原有元素发生堆叠通过去除浮动，给原有元素（商品扩展信息部分）加上clear:both; 果然正常了
    2013-10-10
  • 微信小程序中悬浮窗功能的实现代码

    微信小程序中悬浮窗功能的实现代码

    悬浮窗就是图中微信图标的按钮，采用fixed定位，可拖动和点击。本文给大家分享一个比较常见的常见，通过实例代码给大家介绍微信小程序中悬浮窗功能的实现，一起看看吧
    2019-08-08
  • prettier自动格式化去换行的实现代码

    prettier自动格式化去换行的实现代码

    这篇文章主要介绍了prettier自动格式化去换行的实现代码，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-08-08
  • 一文详解如何有效的处理Promise并发

    一文详解如何有效的处理Promise并发

    这篇文章主要为大家介绍如何有效的处理Promise并发示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-04-04
  • Typescript中使用引用路径别名报错的解决方法

    Typescript中使用引用路径别名报错的解决方法

    本文主要介绍了Typescript中使用引用路径别名报错的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • JS中改变this指向的方法(call和apply、bind)

    JS中改变this指向的方法(call和apply、bind)

    this是javascript的一个关键字，随着函数使用场合不同，this的值会发生变化。但是总有一个原则，那就是this指的是调用函数的那个对象，通过本文给大家介绍JS中改变this指向的方法(call和apply、bind)，需要的朋友参考下
    2016-03-03

最新评论