快捷導(dǎo)航

JS基于onclick事件實(shí)現(xiàn)單個(gè)按鈕的編輯與保存功能示例

更新時(shí)間：2017年02月13日 09:30:12 作者：風(fēng)起從容

這篇文章主要介紹了JS基于onclick事件實(shí)現(xiàn)單個(gè)按鈕的編輯與保存功能,結(jié)合實(shí)例形式分析了JS實(shí)現(xiàn)onclick響應(yīng)事件的轉(zhuǎn)換相關(guān)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了JS基于onclick事件實(shí)現(xiàn)單個(gè)按鈕的編輯與保存功能。分享給大家供大家參考，具體如下：

該實(shí)例可以實(shí)現(xiàn)點(diǎn)擊同一個(gè)按鈕實(shí)現(xiàn)編輯和保存的功能：

<!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" >歡迎來到腳本之家！腳本之家提供專業(yè)的源碼示例與素材下載！</span>
<textarea id="ei" style="display:none;width:300px;">歡迎來到腳本之家！腳本之家提供專業(yè)的源碼示例與素材下載！</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();//第二次單擊的時(shí)候執(zhí)行這個(gè)函數(shù)
    };
  }
  //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();//還原第一次單擊的時(shí)候執(zhí)行的函數(shù)
    };
  }
</script>
</body>
</html>

運(yùn)行效果圖如下：

PS:關(guān)于javascript常用事件及相關(guān)說明還可參考本站在線工具：

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

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript操作DOM技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

JS對(duì)象創(chuàng)建的幾種方式整理
本文主要介紹了JS對(duì)象創(chuàng)建的幾種方式，具有很好的參考價(jià)值，下面跟著小編一起來看下吧
2017-02-02
基于rem的移動(dòng)端響應(yīng)式適配方案(詳解)
下面小編就為大家?guī)硪黄趓em的移動(dòng)端響應(yīng)式適配方案(詳解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-07-07
javascript模版引擎-tmpl的bug修復(fù)與性能優(yōu)化分析
在平時(shí)編碼中，經(jīng)常要做拼接字符串的工作，如把json數(shù)據(jù)用HTML展示出來，以往字符串拼接與邏輯混在在一起會(huì)讓代碼晦澀不堪，加大了多人協(xié)作與維護(hù)的成本。而采用前端模板機(jī)制就能很好的解決這個(gè)問題
2011-10-10
javascript中的replace函數(shù)(帶注釋demo)
在js中有兩個(gè)replace函數(shù) 一個(gè)是location.replace(url) 跳轉(zhuǎn)到一個(gè)新的url.一個(gè)string.replace("xx","yy") 替換字符串返回一個(gè)新的字符串，該方法并不改變字符串本身。下面通過本文給大家介紹javascript中的replace函數(shù)
2018-01-01
js自動(dòng)生成的元素與頁面原有元素發(fā)生堆疊的解決方法
js自動(dòng)生成的元素與頁面原有元素發(fā)生堆疊通過去除浮動(dòng)，給原有元素（商品擴(kuò)展信息部分）加上clear:both; 果然正常了
2013-10-10
微信小程序中懸浮窗功能的實(shí)現(xiàn)代碼
懸浮窗就是圖中微信圖標(biāo)的按鈕，采用fixed定位，可拖動(dòng)和點(diǎn)擊。本文給大家分享一個(gè)比較常見的常見，通過實(shí)例代碼給大家介紹微信小程序中懸浮窗功能的實(shí)現(xiàn)，一起看看吧
2019-08-08
prettier自動(dòng)格式化去換行的實(shí)現(xiàn)代碼
這篇文章主要介紹了prettier自動(dòng)格式化去換行的實(shí)現(xiàn)代碼，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-08-08
一文詳解如何有效的處理Promise并發(fā)
這篇文章主要為大家介紹如何有效的處理Promise并發(fā)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-04-04
Typescript中使用引用路徑別名報(bào)錯(cuò)的解決方法
本文主要介紹了Typescript中使用引用路徑別名報(bào)錯(cuò)的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-07-07
JS中改變this指向的方法(call和apply、bind)
this是javascript的一個(gè)關(guān)鍵字，隨著函數(shù)使用場(chǎng)合不同，this的值會(huì)發(fā)生變化。但是總有一個(gè)原則，那就是this指的是調(diào)用函數(shù)的那個(gè)對(duì)象，通過本文給大家介紹JS中改變this指向的方法(call和apply、bind)，需要的朋友參考下
2016-03-03