How to get a button to revert back to its default state in jQuery

Question

I have invoked some code in my HTML that puts a button in a state of having a background of white when it's clicked.

How do I click on the button and revert back to its original position? This is what I have so far in my code:

$("#button").click(function(){
    $("#button").css("background", "white");
});

What code should I put here to have it back to original form when clicked?

possible duplicate of [How can I "reset"
to its original state after it has been modified by JavaScript?](http://stackoverflow.com/questions/5557641/how-can-i-reset-div-to-its-original-state-after-it-has-been-modified-by-java) — TylerH, Sep 28 '15 at 01:24
That has completely nothing to do with anything i asked buddy — Sam Opoku, Sep 28 '15 at 01:26
It's exactly what you're asking buddy; how to return an element back to its original state. — TylerH, Sep 28 '15 at 05:15

score 0 · Answer 1 · answered Sep 28 '15 at 01:24

0

$("#button").click(function(){
    var button = $("#button");
    if (button.css("background") === "white") {
        button.css("background", "black");
    } else {
        button.css("background", "white");
    }
});

answered Sep 28 '15 at 01:24

dursk

4,435
2
19
30

charlietfl · Answer 2 · 2015-09-28T03:01:51.817

0

It is generally simpler toggling a class on the button and using css rules to manage the style differences:

$(function(){
    $("#button").click(function(){
        $(this).toggleClass( "white_bg");
    });
});

CSS

#button.white_bg{
   background:white;
}

edited Sep 28 '15 at 03:01

answered Sep 28 '15 at 01:26

charlietfl

170,828
13
121
150

1

yes...if code is before elements there is...can't attach events to something that doesn't exist – charlietfl Sep 28 '15 at 03:00

score 0 · Answer 3 · answered Sep 28 '15 at 01:26

0

Use a toggle function

$( "p" ).click(function() {
  $( this ).toggleClass( "highlight" );
});

.highlight {
background: yellow;
}

from:

http://api.jquery.com/toggleclass/

answered Sep 28 '15 at 01:26

NutellaAddict

574
6
24

score 0 · Answer 4 · answered Sep 28 '15 at 03:23

$(document).ready(function(){

  original_background = $("#button").css("background");
  $("#button").click(function(){
     if ($("#button").css("background")==original_background) {
        $("#button").css("background", "white");
     } else {
        $("#button").css("background", original_background);
     }
  });

})

How to get a button to revert back to its default state in jQuery

4 Answers4