首頁 > 開發者 > JavaScript
JS基於onclick事件實現單個按鈕的編輯與儲存功能樣本，jsonclick
本文執行個體講述了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.jb51.net/table/javascript_event
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
