change button color when we click on it in jQuery

Question

I seen the multiple thread on stackoverflow related the same title of this post but this different which I am going to ask. I am trying to make code in jQuery that suppose my default button color is gray and I wish I click one time It will convert to green and when I click twice on btn or click green btn again it will becomes red. overall when I single click on btn it will green and when I click double it will red and when I click third it will default color as grey OR when I click green it will red and when click red it will grey

I want to post this btn data when If btn is grey then btn value = 0 same when green == 1 and when red == 3

I tried to make code but I only know single click function without btn value.. Please help me to creating this code..

jQuery("#my_styles .btn").click(function() {
  jQuery("#my_styles .btn").removeClass('active');
  jQuery(this).toggleClass('active');
});

.active{
    background:red;
}
button.btn:active{
    background:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
HTML--
<div class="col-sm-12" id="my_styles">
  <button type="submit" class="btn btn-warning" id="1" value="0">Button1</button>
  <button type="submit" class="btn btn-warning" id="2" value="0">Button2</button>
</div>
<div class="col-sm-12" id="my_styles">
  <button type="submit" class="btn btn-warning" id="3" value="0">Button3</button>
  <button type="submit" class="btn btn-warning" id="4" value="0">Button4</button>
</div>

Create two classes btn-red and btn-green. You already have a value attribute on your button. Update the value to currentValue+1 each time the button is clicked. Based on the value 0 = no class, 1 = btn-green and 2 = btn-red. After the value is greater than 2 reset it to 0. Hope that helps! — AhmerMH
– AhmerMH, Commented Jul 29, 2020 at 7:43

Christoffer Törnroos · Accepted Answer · 2020-07-29 07:53:42Z

2

You can check the class and change the color that way. Let me know if I didn't understand your issue correctly :)

JavaScript

$( '#myButton' ).click( function() {
  this.isGreen = $( '#myButton' ).hasClass( 'green' );
  this.isGray = $( '#myButton' ).hasClass( 'gray' );
  this.isRed = $( '#myButton' ).hasClass( 'red' );
  
  if ( this.isGray ) {
      $( '#myButton' ).removeClass( 'gray' ).addClass( 'green' );
      this.value = 1;
  }
  else if ( this.isGreen ) {
      $( '#myButton' ).removeClass( 'green' ).addClass( 'red' );
      this.value = 2;
  }
  else if ( this.isRed ) {
      $( '#myButton' ).removeClass( 'red' ).addClass( 'gray' );
      this.value = 0;
  }
  
  console.log( this.value ); // do whatever you want with the value
} );

CSS

#myButton.green {
  background: green;
}

#myButton.gray {
  background: gray;
}

#myButton.red {
  background: red;
}

HTML

<button id="myButton" class="gray" value="0">
  Sample
</button>

answered Jul 29, 2020 at 7:53

Christoffer Törnroos

1143 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shubham Over a year ago

click one separate btn when click on that select all btn as green and again click on same btn will red how ?

Christoffer Törnroos Over a year ago

Sorry but I don't really understand what you're trying to ask..

Simone Rossaini · Accepted Answer · 2020-07-29 10:55:25Z

1

I use value for change color and val();

See this example:

jQuery("#my_styles .btn").click(function() {
  var button=jQuery(this).val();
  if(button==1){
  jQuery(this).removeClass('activegreen');
  jQuery(this).toggleClass('activered');
  jQuery(this).val('3');
  }else if(button==0){
  jQuery(this).toggleClass('activegreen');
  jQuery(this).val('1');
  }else{
  jQuery(this).removeClass('activered');
  jQuery(this).val('0');
  }
  });
jQuery("#reset").click(function() {   
  jQuery('#my_styles .btn').val('0');
  jQuery('#my_styles .btn').removeClass('activered');
  jQuery('#my_styles .btn').removeClass('activegreen');
  
});

button.btn{
background:grey;
}
.activered{
    background:red!important;
}

.activegreen{
    background:green!important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
HTML--
<div class="col-sm-12" id="my_styles">
  <button type="submit" class="btn btn-warning" id="1" value="0">Button1</button>
  <button type="submit" class="btn btn-warning" id="2" value="0">Button2</button>
</div>
<div class="col-sm-12" id="my_styles">
  <button type="submit" class="btn btn-warning" id="3" value="0">Button3</button>
  <button type="submit" class="btn btn-warning" id="4" value="0">Button4</button>
</div>
<div class="col-sm-12" id="my_styles">
  <button type="submit" class="btn btn-warning" id="reset" value="4">Reset</button>

</div>

So now when you click one time will be green with val=1, if click again will be red with val=3 when click again will be grey with val=0

edited Jul 29, 2020 at 10:55

answered Jul 29, 2020 at 7:46

Simone Rossaini

8,1461 gold badge16 silver badges36 bronze badges

6 Comments

Shubham Over a year ago

Thank You master .. but how I add reset btn ..? when I click on that all value will 0 and btn will default color.. ?

Shubham Over a year ago

you are awesome

Shubham Over a year ago

one last thing pls tell me Mr. Simone Rossaini : suppose I have one btn[selectALL] When I click select all When I click deselect all When I click 3rd time it will normal with value changes.. How I achieve ? [selectAll] [deselectAll] [resetAll] the btn will one btn text and function will change.. Could you help me last time agian...

Simone Rossaini Over a year ago

please create a new question i will see

Shubham Over a year ago

this is small sir please help

|

susanta96 · Accepted Answer · 2020-07-29 08:12:49Z

var clickCount = 0;
$("#my_styles .btn").click(function() {
  clickCount++;
  console.log(clickCount);
  if(clickCount % 2 == 0 ) {
    $(this).addClass('red');
  }else {
  $(this).removeClass('red');
  $(this).toggleClass('green');
  }
});

$("#my_styles .btn").dblclick(function(){
  $(this).toggleClass('green');
  $(this).toggleClass('red');
});

.green{
   background:green;
}

.red {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-12" id="my_styles">
  <button type="submit" class="btn btn-warning" id="1" value="0">Button1</button>
  <button type="submit" class="btn btn-warning" id="2" value="0">Button2</button>
</div>

Check this code. It will somewhat help you. But your approach will cause problem later. So, I would recommend to change your approach a little bit. Don't use double click and click functionality for same button it would cause problem.

Collectives™ on Stack Overflow

change button color when we click on it in jQuery

3 Answers 3

2 Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related