使用onclick更改按鈕文本

Question

我有一個“保存”按鈕。 當我單擊此按鈕時，它消失了，並且顯示“取消保存”按鈕。 以下Javascript可以正常運行：

    function saveFunction(id){
        var ie=document.all&&!window.opera? document.all : 0
        var frmObj=ie? ie[id] : document.getElementById(id)
        var toObj=ie? ie['unsave'] : document.getElementById('unsave')
        frmObj.style.display='none';
        toObj.style.display='inline';
        toObj.value=frmObj.innerHTML
    }

這是我的按鈕：

<form id="save-form" method="" action="" novalidate="novalidate">
    <button id="save" type="button" onclick="saveFunction(this.id)">Save</button>
    <button id="unsave" type="button" class="hide" onclick="unsaveFunction(this.id)">Unsave</button>
</form>

這是CSS（隱藏“取消保存”按鈕）：

.hide {
    display:none;
}

問題是我還希望“取消保存”按鈕（單擊時）消失，而要顯示“保存”按鈕。 因此，現在它僅以一種方式起作用： Save --> Unsave ，但我也希望它以另一種方式起作用： Unsave --> Save 。

我試圖復制Javascript函數，更改其屬性，以使其以其他方式起作用（請參閱unsaveFunction() ），但事實並非如此。 我有點卡在那兒。 關於如何解決這個問題的任何想法？

Answer 1

對此進行檢查，希望對您有所幫助。

   function hideOnClk(id){
             if(id == "save"){
               document.getElementById("unsave").style.display="block";
               document.getElementById(id).style.display="none";
             }else{
               document.getElementById("save").style.display="block";
               document.getElementById(id).style.display="none";
             }
          }

<form id="save-form" method="" action="" novalidate="novalidate">
        <button id="save" type="button" onclick="hideOnClk(this.id)">Save</button>
        <button id="unsave" type="button" class="hide" onclick="hideOnClk(this.id)">Unsave</button>
    </form>

Answer 2

使用jQuery

嘗試使用toggleClass

 <form id="save-form" method="" action="" novalidate="novalidate">
        <button id="save" type="button" onclick="$('#save').toggleClass('hide');$('#unsave').toggleClass('hide');">Save</button>
        <button id="unsave" type="button" class="hide" onclick="$('#save').toggleClass('hide');$('#unsave').toggleClass('hide');">Unsave</button>
    </form>

使用JavaScript

    function myFunction() {
   var element=     document.getElementById("save");
        element.classList.toggle("hide");
  var element=  document.getElementById("unsave");
        element.classList.toggle("hide");
    }

 <form id="save-form" method="" action="" novalidate="novalidate">
            <button id="save" type="button" onclick="myFunction();">Save</button>
            <button id="unsave" type="button" class="hide" onclick="myFunction();">Unsave</button>

Answer 3

具有兩個功能的單個按鈕呢？ 它開始時就像一個保存按鈕，單擊后會執行保存操作，然后變成“未保存”按鈕。

請參閱下面的代碼以查看是否有幫助：

 const btn = document.getElementById("saveControl"); btn.onclick = function(){ console.log(btn.classList.value) if (btn.classList.contains("saveBtn")){ //DO SAVE STUFF... btn.classList.remove("saveBtn") btn.classList.add("btnUnsave") btn.innerText = "Unsave" } else { //DO UNSAVE STUFF... btn.classList.add("saveBtn") btn.classList.remove("btnUnsave") btn.innerText = "Save" } } 

 .saveBtn{ color:blue } .btnUnsave{ color: red; } 

 <button id="saveControl" class="saveBtn">Save</button> 

Answer 4

簡單易行，關於您的編程水平，我不想讓您無所適從。

 function saveFunction() { // getting the form from the document using the form name attribute let form = document.form; // using the buttons names attribute to select theme // classList property of any element gives you all the class it has // add('class name') adds the specified class form.save.classList.add('hide'); // remove('class name') removes the specified class form.unsave.classList.remove('hide'); } function unsaveFunction() { let form = document.form; form.unsave.classList.add('hide'); form.save.classList.remove('hide'); } 

 .hide { display: none; } 

 <form name="form" method="" action="" novalidate="novalidate"> <button id="save" type="button" onclick="saveFunction()" name="save">Save</button> <button id="unsave" type="button" name="unsave" class="hide" onclick="unsaveFunction()">Unsave</button> </form> 

Answer 5

嘗試HTML DOM classList屬性切換

document.getElementById("save").toggle("hide)
document.getElementById("unsave").toggle("hide)