Change a style then with second click reset to original class

Question

I have a button and it takes some styles with first click. But I want the user to be able to reset to the original with second click on own button or any button in page.

How can I do this?

my codes

$("#checkButton").click(function() {
  $("#checkButton").css("color", "yellow");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="checkButton">name 1</button>

I'd suggest using two or one CSS class for this, so you can check the condition and then decide what to set. `if($('#checkButton').hasClass("yo")) {....})` — oel, Mar 11 '19 at 10:21
The above duplicate answers your question. However, I would also suggest sticking with classes and not using `.css`, then you can `addClass` `removClass` or `toggleClass` — freedomn-m, Mar 11 '19 at 10:23
Some answers were posted, but without knowing more about the context, I don't think they are useful. What is the bigger picture here? — , Mar 11 '19 at 10:33
Add class and use this code: $(document).ready(function(){ $(window).click(function(e) { let clickedLement = e.target.id; if (clickedLement == "checkButton" && !($("#checkButton").hasClass("color-class"))) { $("#checkButton").addClass("color-class"); } else if ($("#checkButton").hasClass("color-class")) { $("#checkButton").removeClass("color-class"); } }); }); Hope it helps you. — Rohit Mittal, Mar 11 '19 at 10:37

Mamun · Answer 1 · 2019-03-11T10:32:26.443

I think it is better to use a class and toggle that class using .toggleClass() in each button click.

.toggleClass() add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the state argument.

$("#checkButton").click(function () {
  $("#checkButton").toggleClass("colorClass");
});

.colorClass{
  color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="checkButton">
  name 1
</button>

score 0 · Answer 2 · answered Mar 11 '19 at 10:26

Try this, It will work for you.

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <style>
            .my-class{
                background-color: red; 
                color: yellow; 
            }
        </style>
    </head>
    <body>
        <button id="checkButton" class="">Click Me!</button>


        <script>
            $("button").click(function () {
                $("#checkButton").toggleClass("my-class");
            });

        </script>

    </body>
</html>

score 0 · Accepted Answer · answered Mar 11 '19 at 10:29

You can do it with CSS styling, but I've made a below snippet in case if you want to change color without make CSS.

Check current color, and then set the different one.

$("#checkButton").click(function() {
  var color = $("#checkButton").css("color")
  var yellow = "rgb(255, 255, 0)"
  
  if (color !== yellow) {
    $("#checkButton").css("color", yellow);
  } else {
    $("#checkButton").css("color", "");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="checkButton">name 1</button>

thank you I wanted exactly that. – Iman Mar 11 '19 at 11:32 — Iman, Mar 11 '19 at 11:32

Change a style then with second click reset to original class

3 Answers3