本文實例講述了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>運行效果圖如下：
PS:關于javascript常用事件及相關說明還可參考本站在線工具：
javascript事件與功能說明大全：
http://tools.VeVB.COm/table/javascript_event
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript事件相關操作與技巧大全》、《JavaScript操作DOM技巧總結》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
