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" >歡迎來(lái)到腳本之家！腳本之家提供專業(yè)的源碼示例與素材下載！</span>
<textarea id="ei" style="display:none;width:300px;">歡迎來(lái)到腳本之家！腳本之家提供專業(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)說(shuō)明還可參考本站在線工具：

javascript事件與功能說(shuō)明大全：
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)文章

全面解析Bootstrap布局組件應(yīng)用
這篇文章主要為大家全面解析Bootstrap布局組件應(yīng)用，幾乎對(duì)所有Bootstrap布局組件示例進(jìn)行了解析，感興趣的小伙伴們可以參考一下
2016-02-02
js剪切板應(yīng)用clipboardData實(shí)例解析
這篇文章主要為大家詳細(xì)介紹了js剪切板應(yīng)用clipboardData實(shí)例，并分享了四種實(shí)現(xiàn)方法，感興趣的小伙伴們可以參考一下
2016-05-05
js實(shí)現(xiàn)拖拽元素選擇和刪除
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)拖拽元素選擇和刪除，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-08-08
js圖片滾動(dòng)效果時(shí)間可隨意設(shè)定當(dāng)鼠標(biāo)移上去時(shí)停止
這篇文章主要介紹了js圖片滾動(dòng)效果時(shí)間可隨意設(shè)定當(dāng)鼠標(biāo)移上去時(shí)停止，需要的朋友可以參考下
2014-06-06
javascript管中窺豹形參與實(shí)參淺析
本想從語(yǔ)言的角度來(lái)分析，無(wú)奈功力不夠，只能粗淺的嘗試一下，于是稱之管中窺豹，還望大牛指正
2011-12-12
Web js實(shí)現(xiàn)復(fù)制文本到粘貼板
這篇文章主要為大家詳細(xì)介紹了Web js實(shí)現(xiàn)復(fù)制文本到粘貼板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08
Uniapp全局消息提示以及其組件的實(shí)現(xiàn)方法
當(dāng)時(shí)在做登錄那邊需要做一些交互,所以必不可少要用到消息提示框,下面這篇文章主要給大家介紹了關(guān)于Uniapp全局消息提示以及其組件的實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-06-06
JS性能優(yōu)化筆記搜索整理
在網(wǎng)上搜索了下關(guān)于性能優(yōu)化方面的內(nèi)容，現(xiàn)簡(jiǎn)單整理可供大家在優(yōu)化過(guò)程中使用，感興趣的額朋友可以了解下
2013-08-08
$淺談JavaScript中面向?qū)ο蟮牡纳羁截惡蜏\拷貝$
淺談JavaScript中面向?qū)ο蟮牡纳羁截惡蜏\拷貝
下面小編就為大家?guī)?lái)一篇淺談JavaScript中面向?qū)ο蟮牡纳羁截惡蜏\拷貝。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-08-08
JavaScript繼承的特性與實(shí)踐應(yīng)用深入詳解
這篇文章主要介紹了JavaScript繼承的特性與實(shí)踐應(yīng)用,結(jié)合實(shí)例形式較為深入的分析了javascript繼承相關(guān)概念、特性、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下
2018-12-12