CODEWITHSUNDEEP
javascripthtmlcss
Maasha Theytaz
Maasha Theytaz

Reputation: 79

Change button text with onclick

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?

Upvotes: 0

Views: 7173

Answers (5)

JIJOMON K.A
JIJOMON K.A

Reputation: 1280

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>

Upvotes: 1

Marios Nikolaou
Marios Nikolaou

Reputation: 1336

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>

Upvotes: 2

Lowell Ed Llames
Lowell Ed Llames

Reputation: 207

Try HTML DOM classList Property Toggle

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

Upvotes: 1

user7148391
user7148391

Reputation:

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>

Upvotes: 1

Calvin Nunes
Calvin Nunes

Reputation: 6501

What about one single button with both functionalities? It starts like a save button, when clicked, it do the save stuff then if becomes 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>

Upvotes: 1

Related Questions