I have a "Save" button. When I click this button, it disappears and an "Unsave" button shows up. The following Javascript works just fine:

    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
    }

Here are my buttons:

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

And here's the CSS (to hide the "Unsave" button):

.hide {
    display:none;
}

The problem is that I also want the "Unsave" button (when clicked) to disappear and the "Save" button to show up. So, right now it only works in one way: Save --> Unsave, but I also want it to work the other way around: Unsave --> Save.

I tried to duplicate the Javascript function, change its properties so that it'd work the other way around (see unsaveFunction()) but it doesn't. I'm kinda stuck there. Any idea on how to solve this?

I have a "Save" button. When I click this button, it disappears and an "Unsave" button shows up. The following Javascript works just fine:

    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
    }

Here are my buttons:

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

And here's the CSS (to hide the "Unsave" button):

.hide {
    display:none;
}

The problem is that I also want the "Unsave" button (when clicked) to disappear and the "Save" button to show up. So, right now it only works in one way: Save --> Unsave, but I also want it to work the other way around: Unsave --> Save.

I tried to duplicate the Javascript function, change its properties so that it'd work the other way around (see unsaveFunction()) but it doesn't. I'm kinda stuck there. Any idea on how to solve this?

• javascript
• html
• css

• why you don't use JQuery to simplify your solution ? – Dev Matee Commented Oct 1, 2018 at 12:02
• @MateeGojra for such a simple stuff, no need to load jquery on the page. – Jai Commented Oct 1, 2018 at 12:03
• @jai i think you hate jQuery...:D Jquery paradox...:D – ElusiveCoder Commented Oct 1, 2018 at 12:05
• @BuggyParadox i learnt javascript from jquery. I like to use it only when it needs to be. Not for everything. – Jai Commented Oct 1, 2018 at 12:06
• ok by the way, Why you are answering on behalf of Maasha?? – ElusiveCoder Commented Oct 1, 2018 at 12:07

5 Answers 5

Check this, hope it helps.

   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>

What about one single button with both functionalities? It starts like a save button, when clicked, it do the save stuff then if bees a "unsave" button.

See below code to see if it helps:

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>

Easy and simple, Regarding your level of programming i don't want to overwhelm you with all the possible ways you can do it.

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>

Try HTML DOM classList Property Toggle

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

Using jQuery

Try to use 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>

Using 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>