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 相关文章推荐
CSS常用网站布局实例
Apr 03 Javascript
用js做一个小游戏平台 (一)
Dec 29 Javascript
jQuery dialog 异步调用ashx,webservice数据的代码
Aug 03 Javascript
JavaScript代码复用模式实例分析
Dec 02 Javascript
onkeydown事件解决按回车键直接提交数据的需求
Apr 11 Javascript
JS扩展方法实例分析
Apr 15 Javascript
JavaScript中const、var和let区别浅析
Oct 11 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
Jan 12 Javascript
详解Vue用axios发送post请求自动set cookie
May 10 Javascript
Three.js利用dat.GUI如何简化试验流程详解
Sep 26 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
Feb 06 Javascript
详解基于vue的服务端渲染框架NUXT
Jun 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
phpMyAdmin 安装配置方法和问题解决
2009/06/08 PHP
elgg 获取文件图标地址的方法
2010/03/20 PHP
PHP中使用foreach和引用导致程序BUG的问题介绍
2012/09/05 PHP
PHP 正则表达式之正则处理函数小结(preg_match,preg_match_all,preg_replace,preg_split)
2012/10/05 PHP
PHP+Mysql基于事务处理实现转账功能的方法
2015/07/08 PHP
PHP Mysqli 常用代码集合
2016/11/12 PHP
php 访问oracle 存储过程实例详解
2017/01/08 PHP
ext实现完整的登录代码
2008/08/08 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
跟我学习javascript的函数和函数表达式
2015/11/16 Javascript
ajax与json 获取数据并在前台使用简单实例
2017/01/19 Javascript
JS实现针对给定时间的倒计时功能示例
2017/04/11 Javascript
RxJS的入门指引和初步应用
2019/06/15 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
2019/09/25 Javascript
weui上传多图片,压缩,base64编码的示例代码
2020/06/22 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
2020/10/27 Javascript
微信小程序实现分页加载效果
2020/11/19 Javascript
用python实现面向对像的ASP程序实例
2014/11/10 Python
Python六大开源框架对比
2015/10/19 Python
详解django中自定义标签和过滤器
2017/07/03 Python
解决python os.mkdir创建目录失败的问题
2018/10/16 Python
Python实现的微信红包提醒功能示例
2019/08/22 Python
对django 2.x版本中models.ForeignKey()外键说明介绍
2020/03/30 Python
解决运行出现'dict' object has no attribute 'has_key'问题
2020/07/15 Python
python+django+selenium搭建简易自动化测试
2020/08/19 Python
美国最古老的精致书写工具制造商:A.T. Cross(高仕)
2018/01/30 全球购物
Bed Bath & Beyond加拿大官网:购买床上用品、浴巾、厨房电器等
2019/10/04 全球购物
《三峡》教学反思
2014/03/01 职场文书
计算机科学技术自荐信
2014/06/12 职场文书
公司门卫岗位职责范本
2014/07/08 职场文书
喝酒驾驶检讨书
2014/10/01 职场文书
2015学校年度工作总结
2015/05/11 职场文书
2015年质量管理工作总结范文
2015/05/18 职场文书
2016年禁毒宣传活动总结
2016/04/05 职场文书
Python超详细分步解析随机漫步
2022/03/17 Python
不负正版帝国之名 《重返帝国》引领SLG手游制作新的标杆
2022/04/07 其他游戏