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

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

創(chuàng)新互聯(lián)長(zhǎng)期為上千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為江源企業(yè)提供專(zhuān)業(yè)的成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作，江源網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

該實(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" >歡迎來(lái)到創(chuàng)新互聯(lián)！創(chuàng)新互聯(lián)提供專(zhuān)業(yè)的源碼示例與素材下載！</span>
<textarea id="ei" >歡迎來(lái)到創(chuàng)新互聯(lián)！創(chuàng)新互聯(lián)提供專(zhuān)業(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)行效果圖如下：

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

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

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

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《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ì)有所幫助。

文章標(biāo)題：JS基于onclick事件實(shí)現(xiàn)單個(gè)按鈕的編輯與保存功能示例
轉(zhuǎn)載源于：http://www.muchs.cn/article36/pieisg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、全網(wǎng)營(yíng)銷(xiāo)推廣、網(wǎng)站內(nèi)鏈、動(dòng)態(tài)網(wǎng)站、ChatGPT、App開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都網(wǎng)頁(yè)設(shè)計(jì)公司