欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2017年02月13日 09:30:12   作者：風起從容  
這篇文章主要介紹了JS基于onclick事件實現(xiàn)單個按鈕的編輯與保存功能,結(jié)合實例形式分析了JS實現(xiàn)onclick響應(yīng)事件的轉(zhuǎn)換相關(guān)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下

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

該實例可以實現(xiàn)點擊同一個按鈕實現(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();//第二次單擊的時候執(zhí)行這個函數(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();//還原第一次單擊的時候執(zhí)行的函數(shù)
    };
  }
</script>
</body>
</html>

運行效果圖如下：

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錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》

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

相關(guān)文章

  • JS對象創(chuàng)建的幾種方式整理

    JS對象創(chuàng)建的幾種方式整理

    本文主要介紹了JS對象創(chuàng)建的幾種方式，具有很好的參考價值，下面跟著小編一起來看下吧
    2017-02-02
  • 基于rem的移動端響應(yīng)式適配方案(詳解)

    基于rem的移動端響應(yīng)式適配方案(詳解)

    下面小編就為大家?guī)硪黄趓em的移動端響應(yīng)式適配方案(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-07-07
  • javascript模版引擎-tmpl的bug修復(fù)與性能優(yōu)化分析

    javascript模版引擎-tmpl的bug修復(fù)與性能優(yōu)化分析

    在平時編碼中，經(jīng)常要做拼接字符串的工作，如把json數(shù)據(jù)用HTML展示出來，以往字符串拼接與邏輯混在在一起會讓代碼晦澀不堪，加大了多人協(xié)作與維護的成本。而采用前端模板機制就能很好的解決這個問題
    2011-10-10
  • javascript中的replace函數(shù)(帶注釋demo)

    javascript中的replace函數(shù)(帶注釋demo)

    在js中有兩個replace函數(shù) 一個是location.replace(url) 跳轉(zhuǎn)到一個新的url.一個string.replace("xx","yy") 替換字符串 返回一個新的字符串，該方法并不改變字符串本身。下面通過本文給大家介紹javascript中的replace函數(shù)
    2018-01-01
  • js自動生成的元素與頁面原有元素發(fā)生堆疊的解決方法

    js自動生成的元素與頁面原有元素發(fā)生堆疊的解決方法

    js自動生成的元素與頁面原有元素發(fā)生堆疊通過去除浮動，給原有元素（商品擴展信息部分）加上clear:both; 果然正常了
    2013-10-10
  • 微信小程序中懸浮窗功能的實現(xiàn)代碼

    微信小程序中懸浮窗功能的實現(xiàn)代碼

    懸浮窗就是圖中微信圖標的按鈕，采用fixed定位，可拖動和點擊。本文給大家分享一個比較常見的常見，通過實例代碼給大家介紹微信小程序中懸浮窗功能的實現(xiàn)，一起看看吧
    2019-08-08
  • prettier自動格式化去換行的實現(xiàn)代碼

    prettier自動格式化去換行的實現(xiàn)代碼

    這篇文章主要介紹了prettier自動格式化去換行的實現(xiàn)代碼，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-08-08
  • 一文詳解如何有效的處理Promise并發(fā)

    一文詳解如何有效的處理Promise并發(fā)

    這篇文章主要為大家介紹如何有效的處理Promise并發(fā)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2023-04-04
  • Typescript中使用引用路徑別名報錯的解決方法

    Typescript中使用引用路徑別名報錯的解決方法

    本文主要介紹了Typescript中使用引用路徑別名報錯的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2022-07-07
  • JS中改變this指向的方法(call和apply、bind)

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

    this是javascript的一個關(guān)鍵字，隨著函數(shù)使用場合不同，this的值會發(fā)生變化。但是總有一個原則，那就是this指的是調(diào)用函數(shù)的那個對象，通過本文給大家介紹JS中改變this指向的方法(call和apply、bind)，需要的朋友參考下
    2016-03-03

最新評論