Javascript 使用onclick更改按钮文本

我有一个“保存”按钮。当我点击这个按钮时，它会消失，并显示一个“未保存”按钮。以下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>

问题是，我还希望“取消保存”按钮（单击时）消失，“保存”按钮出现。因此，现在它只以一种方式工作：

Save-->Unsave

，但我也希望它以另一种方式工作：

Unsave-->Save

---

我尝试复制Javascript函数，更改其属性，使其能够以另一种方式工作（请参见

unsaveFunction（）

），但它没有。我有点困在那里了。有没有关于如何解决这个问题的想法？

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

函数myFunction（）{
var元素=document.getElementById（“保存”）；
元素.classList.toggle（“隐藏”）；
var元素=document.getElementById（“未保存”）；
元素.classList.toggle（“隐藏”）；
}
拯救
未保存

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

函数myFunction（）{
var元素=document.getElementById（“保存”）；
元素.classList.toggle（“隐藏”）；
var元素=document.getElementById（“未保存”）；
元素.classList.toggle（“隐藏”）；
}
拯救
未保存

一个按钮同时具备两种功能怎么样？ 它像一个保存按钮一样启动，当单击时，它执行保存操作，然后变成“未保存”按钮

请参阅下面的代码以查看它是否有帮助：

const btn=document.getElementById（“saveControl”）；
btn.onclick=函数（）{
console.log（btn.classList.value）
if（btn.classList.contains（“saveBtn”））{
//一定要保存东西。。。
btn.classList.remove（“saveBtn”）
btn.classList.add（“btnUnsave”）
btn.innerText=“未保存”
}否则{
//做不保存的东西。。。
btn.classList.add（“saveBtn”）
btn.classList.remove（“btnUnsave”）
btn.innerText=“保存”
}
}

.saveBtn{
颜色：蓝色
}
.btnUnsave{
颜色：红色；
}

---

保存

一个同时具有两种功能的按钮怎么样？ 它像一个保存按钮一样启动，当单击时，它执行保存操作，然后变成“未保存”按钮

请参阅下面的代码以查看它是否有帮助：

const btn=document.getElementById（“saveControl”）；
btn.onclick=函数（）{
console.log（btn.classList.value）
if（btn.classList.contains（“saveBtn”））{
//一定要保存东西。。。
btn.classList.remove（“saveBtn”）
btn.classList.add（“btnUnsave”）
btn.innerText=“未保存”
}否则{
//做不保存的东西。。。
btn.classList.add（“saveBtn”）
btn.classList.remove（“btnUnsave”）
btn.innerText=“保存”
}
}

.saveBtn{
颜色：蓝色
}
.btnUnsave{
颜色：红色；
}

---

保存

简单易懂，考虑到您的编程水平，我不想用所有可能的方法让您不知所措

function saveFunction（）{
//使用表单名称属性从文档中获取表单
let form=document.form；
//使用“按钮名称”属性选择主题
//任何元素的classList属性都提供了它所拥有的所有类
//add（'classname'）添加指定的类
form.save.classList.add（'hide'）；
//remove（'classname'）删除指定的类
form.unsave.classList.remove（'hide'）；
}
函数unsaveFunction（）{
let form=document.form；
form.unsave.classList.add（'hide'）；
form.save.classList.remove（'hide'）；
}

.hide{
显示：无；
}

拯救
未保存

简单易懂，关于你的编程水平，我不想用所有可能的方法让你不知所措

function saveFunction（）{
//使用表单名称属性从文档中获取表单
let form=document.form；
//使用“按钮名称”属性选择主题
//任何元素的classList属性都提供了它所拥有的所有类
//add（'classname'）添加指定的类
form.save.classList.add（'hide'）；
//remove（'classname'）删除指定的类
form.unsave.classList.remove（'hide'）；
}
函数unsaveFunction（）{
let form=document.form；
form.unsave.classList.add（'hide'）；
form.save.classList.remove（'hide'）；
}

.hide{
显示：无；
}

拯救
未保存

尝试HTML DOM类列表属性切换

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

---

尝试HTML DOM类列表属性切换

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

---

检查这个，希望它有帮助

   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>

函数hideOnClk（id）{
如果（id=“保存”）{
document.getElementById（“unsave”）.style.display=“block”；
document.getElementById（id）.style.display=“无”；
}否则{
document.getElementById（“保存”）.style.display=“块”；
document.getElementById（id）.style.display=“无”；
}
}
拯救
未保存

检查此项，希望有帮助

   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>

函数hideOnClk（id）{
如果（id=“保存”）{
document.getElementById（“unsave”）.style.display=“block”；
document.getElementById（id）.style.display=“无”；
}否则{
document.getElementById（“保存”）.style.display=“块”；
document.getElementById（id）.style.display=“无”；
}
}
拯救
未保存

为什么不使用JQuery简化您的解决方案？@MateeGojra对于这么简单的东西，不需要在页面上加载JQuery。@jai我想您讨厌JQuery…：D JQuery悖论…：D@BuggyParadox我从jquery学习javascript。我喜欢只在需要的时候使用它。不是所有的问题。顺便问一下，你为什么代表Maasha回答？为什么不使用JQuery简化你的解决方案？@MateeG