CODEWITHSUNDEEP
htmljquerycssbuttonclick
Shubham
Shubham

Reputation: 75

change button color when we click on it in jQuery

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>

Upvotes: 0

Views: 1082

Answers (3)

Simone Rossaini
Simone Rossaini

Reputation: 8162

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

Upvotes: 1

susanta96
susanta96

Reputation: 89

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.

Upvotes: 1

Christoffer T&#246;rnroos
Christoffer T&#246;rnroos

Reputation: 114

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>

Upvotes: 2

Related Questions