javascript - 使用 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>