Reputation: 79
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
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
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
Reputation: 207
Try HTML DOM classList Property Toggle
document.getElementById("save").toggle("hide)
document.getElementById("unsave").toggle("hide)
Upvotes: 1
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
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