I was wondering how it is possible to make the button undo something too after clicking it. In my scenario just simple formatting of Text(Color,size etc), when you first click it, it formats the text as described in Javascript, but I would like to add a function, that when you click it again, that it undoes that.

`<script>    
function myFunction(){    
  document.getElementById("demo").style.fontsize="25px";
  document.getElementById("demo").style.color="#3AF702";
  document.getElementById("demo").style.backgroundcolor="red";    
}    
</script>`

<button type="change" onclick="myFunction()">Change!</button>

I checked other articles already, which seemed to be related, but I did not get any smarter out of those, so my apologies in advance if it is a dup and thanks for your help!

I was wondering how it is possible to make the button undo something too after clicking it. In my scenario just simple formatting of Text(Color,size etc), when you first click it, it formats the text as described in Javascript, but I would like to add a function, that when you click it again, that it undoes that.

`<script>    
function myFunction(){    
  document.getElementById("demo").style.fontsize="25px";
  document.getElementById("demo").style.color="#3AF702";
  document.getElementById("demo").style.backgroundcolor="red";    
}    
</script>`

<button type="change" onclick="myFunction()">Change!</button>

I checked other articles already, which seemed to be related, but I did not get any smarter out of those, so my apologies in advance if it is a dup and thanks for your help!

• javascript
• html

Share Improve this question Follow asked Mar 13, 2019 at 16:57 OchitsukuOchitsuku 4111 gold badge11 silver badge88 bronze badges 5

• Save the old config in an object/local storage before changing it. Set them again on button click. – Prerak Sola Commented Mar 13, 2019 at 17:00
• 1 in your function, before you do anything else, check the current colour (and/or any of the other attributes) of the button. If it's currently already the value you are changing it to above, then change it back again. (Of course if what it was before is not predictable/hard-coded, then you'll have to have stored that old value beforehand in relation to the button in question.) If it's not the value you want to change it to, then change it to that value, instead. Should be a simple if/else block. – ADyson Commented Mar 13, 2019 at 17:01
• Thanks for responding already so quickly. I think I have to clarify something here. So the text has no format before clicking the button, after clicking it changes to the above, now I am wondering how can I make the button to have two functions basically. First click, change to the Format X, second click should undo that change. – Ochitsuku Commented Mar 13, 2019 at 17:07
• you don't need two functions, you need one function which checks the existing values and makes a decision - as I already described. – ADyson Commented Mar 13, 2019 at 17:13
• Yea, sorry still a beginner :) after seeing the codes below your answer made sense now too! Thanks! – Ochitsuku Commented Mar 13, 2019 at 17:32

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

<script>    
var flag = true;
function myFunction(){
  let el = document.getElementById("demo");
  el.style.fontsize = flag ? "25px" : "";
  el.style.color= flag ? "#3AF702" : "";
  el.style.backgroundcolor=flag ? "red" : "";   
  flag = !flag; 
}    
</script>`

<button type="change" onclick="myFunction()">Change!</button>

The easiest way to do this is to add and remove a class

<style>
  .change {
    font-size: 25px;
    color: #3AF702;
    background-color="red"
  }
</style>
<script>
  var x = 0;

  function myFunction() {
    if (x == 0) {
      document.getElementById("demo").classList.add("change");
      x = 1;
    } else {
      document.getElementById("demo").classList.remove("change");
      x = 0;
    }
  }
</script>

<button type="change" onclick="myFunction()">Change!</button>

Create an object that stores the initial values of your button and a variable which holds the state of it.

var state = 0;
var backup = {};
backup.fontSize = document.getElementById("demo").style.fontsize;
backup.color = document.getElementById("demo").style.color;
backup.background = document.getElementById("demo").style.backgroundcolor;

Now you can easily switch between the backup and the new values like this:

function myFunction() {
  if (state == 0) {
    document.getElementById("demo").style.fontsize = "25px";
    document.getElementById("demo").style.color = "#3AF702";
    document.getElementById("demo").style.backgroundcolor = "red";
    state = 1;
  } else {
    document.getElementById("demo").style.fontsize = backup.fontSize;
    document.getElementById("demo").style.color = backup.color;
    document.getElementById("demo").style.backgroundcolor = backup.background;
    state = 0;
  }
}

var flag = true;
function myFunction(){
  var x = document.getElementById("demo");
  if (flag) {
    x.style.backgroundColor = "red";
    x.style.color="#3AF702";
    x.style.fontSize="25px"
  } else {
    x.style.backgroundColor = "blue";
    x.style.color="#dddddd";
    x.style.fontSize="10px"
  } 
 flag = !flag
}

function myFunction(){
  demo.className = demo.className ? "" : "style"
}

.style {
    font-size: 25px;
    color: red;
    background: blue;
}

<p id="demo">Hi!</p>
<button type="change" onclick="myFunction()">Change!</button>