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


Posted in Javascript onFebruary 13, 2017

本文实例讲述了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>

运行效果图如下:

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

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

javascript事件与功能说明大全:
http://tools.3water.com/table/javascript_event

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

Javascript 相关文章推荐
JavaScript 数组的 uniq 方法
Jan 23 Javascript
jquery validate.js表单验证的基本用法入门
May 13 Javascript
jQuery实现图片信息的浮动显示实例代码
Aug 28 Javascript
js jq 单击和双击区分示例介绍
Nov 05 Javascript
javascript简单实现命名空间效果
Mar 06 Javascript
用JavaScript实现类似于ListBox功能示例代码
Mar 09 Javascript
JavaScript中reduce()方法的使用详解
Jun 09 Javascript
JS学习之表格的排序简单实例
May 16 Javascript
JS在浏览器中解析Base64编码图像
Feb 09 Javascript
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
npm 更改默认全局路径以及国内镜像的方法
May 16 Javascript
vue3.0中使用postcss-pxtorem的具体方法
Nov 20 Javascript
js获取当前页的URL与window.location.href简单方法
Feb 13 #Javascript
js实现九宫格拼图小游戏
Feb 13 #Javascript
AngularJS学习第二篇 AngularJS依赖注入
Feb 13 #Javascript
关于不同页面之间实现参数传递的几种方式讨论
Feb 13 #Javascript
如何用js判断dom是否有存在某class的值
Feb 13 #Javascript
AngularJS学习第一篇 AngularJS基础知识
Feb 13 #Javascript
详解Javascript中DOM的范围
Feb 13 #Javascript
You might like
PHP 输出缓存详解
2009/06/20 PHP
CentOS系统中PHP安装扩展的方式汇总
2017/04/09 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
PHP ajax+jQuery 实现批量删除功能实例代码小结
2018/12/06 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
javascript 支持链式调用的异步调用框架Async.Operation
2009/08/04 Javascript
基于JQuery的密码强度验证代码
2010/03/01 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
2010/08/27 Javascript
javascript date格式化示例
2013/09/25 Javascript
jquery复选框checkbox实现删除前判断
2014/04/20 Javascript
jQuery中的pushStack实现原理和应用实例
2015/02/03 Javascript
使用nodejs开发cli项目实例
2015/06/03 NodeJs
Node.js操作Firebird数据库教程
2016/03/04 Javascript
解析Javascript单例模式概念与实例
2016/12/05 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
2016/12/25 Javascript
jQuery弹出层插件popShow(改进版)用法示例
2017/01/23 Javascript
js最简单的双向绑定实例讲解
2018/01/02 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
2018/01/16 Javascript
vue axios请求超时的正确处理方法
2018/04/02 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
2018/08/08 Javascript
浅谈开发eslint规则
2018/10/01 Javascript
在vue中使用setInterval的方法示例
2019/04/16 Javascript
Python兔子毒药问题实例分析
2015/03/05 Python
python实现整数的二进制循环移位
2019/03/08 Python
python中列表的切片与修改知识点总结
2019/07/23 Python
Python 实现将数组/矩阵转换成Image类
2020/01/09 Python
Python的PIL库中getpixel方法的使用
2020/04/09 Python
html5 canvas 实现光线沿不规则路径运动
2020/04/20 HTML / CSS
美国波道夫·古德曼百货官网:Bergdorf Goodman
2017/11/07 全球购物
美国知名平价彩妆品牌:e.l.f. Cosmetics
2017/11/20 全球购物
SOA的常见陷阱或者误解是什么
2014/10/05 面试题
化工专业推荐信范文
2013/11/28 职场文书
公路局群众路线教育实践活动第一阶段工作汇报
2014/10/25 职场文书
2014年司机工作总结
2014/11/21 职场文书
社会主义核心价值观主题教育活动总结
2015/05/07 职场文书
浅谈Python数学建模之整数规划
2021/06/23 Python