CODEWITHSUNDEEP
javascriptjqueryhtmlcssajax
user1556433
user1556433

Reputation:

How to change the class of an html button at runtime on its click event?

I have following buttons in my html page:

<button id="button1" onclick="myFunction()" class="buttonClassA"></button>
<button id="button2" onclick="myFunction()" class="buttonClassA"></button>
<button id="button3" onclick="myFunction()" class="buttonClassA"></button>
<button id="button4" onclick="myFunction()" class="buttonClassA"></button>

Following is my css file where I have written buttonClassA

.buttonClassA
{
    display: block; width:auto; height:auto; padding:5px; margin-top:10px;

    background: #398525; /* old browsers */
    background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */

    box-shadow: inset 0px 0px 6px #fff;
    -webkit-box-shadow: inset 0px 0px 6px #fff;
    border: 1px solid #5ea617;
    border-radius: 10px;

    font:26px times-new-roman; 
    text-align: center;
    text-decoration: none;
    color: #147032;
    text-shadow: 0px 1px 2px #b4d1ad;

    -moz-transition: color 0.25s ease-in-out;
    -webkit-transition: color 0.25s ease-in-out;
    transition: color 0.25s ease-in-out;
}

My Requirement: When I click any button, its background should change.

How should I do it? Should I create another class buttonClassB in which I just change background color and copy all other things from buttonClassA? If this is the approach, then how can I change the class of the button at runtime when button is clicked? Please suggest?

Upvotes: 2

Views: 35667

Answers (10)

AbdulKader Burghul
AbdulKader Burghul

Reputation: 1

I suppose you want to change the background for a buttons in a group, so you want to change its background compared with them, try this; (group of four buttons):

<!-- Call function for a button; id="btnButton1" for example -->
<button id="btnButton1" onClick= "chngBG(Event, 'btnButton1')">Button 1</button>


<script 
function chngBG(evt, MyButton) {
// Add your code to reset backgrounds to all other buttons

// set a background you want to the targeted button:
document.getElementById(MyButton).style.background = "#fff6a1";
}

</script>

Upvotes: -1

Prasanna
Prasanna

Reputation: 41

Please check this https://jsfiddle.net/8ors4p2c/

<button id="button1" class="buttonClassA">hello</button>

Its CSS is

.buttonClassA {
  background-color: green;
}
.buttonClassA.buttonClassB {
  background-color: red;
}

and here is the JS code

jQuery('.buttonClassA').click(function() {
  if(jQuery('.buttonClassA').hasClass('buttonClassB')) {
        jQuery('.buttonClassA').removeClass('buttonClassB');
  } else {
        jQuery('.buttonClassA').addClass('buttonClassB');
  }
});

Upvotes: 1

Sachin from Pune
Sachin from Pune

Reputation: 736

//This Is My Jquery or JavaScript Code
$( "button" ).click(function() {
  $( this ).toggleClass( "green" );
});
/*This Is My CSS Code*/
.orange {
    background: Orange;
    color: white;
    text-align:center;
  line-height:50px;
  border-radius: 30px;
  width: 100px;
  height: 50px;
  }
  
.green {
   
  background-color: green;
  color: white;
  
  }
<! -- This Is My HTML Code -->

<head>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
  <head>
  <body>
<button class="orange">hello</button>
</body>

<head>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <style>
  .blue {
   width: 100px;
  height: 50px;
  background-color: green;
  color: white;
  text-align:center;
  line-height:50px;``
  border-radius: 30px;
  }
  .red {
    background: red;
    color: white;
  }
  </style>
  <head>
  <body>
<button class="blue">hello</button>
<script>
$( "button" ).click(function() {
  $( this ).toggleClass( "red" );
});
</script>
</body>

Upvotes: 0

user1636522
user1636522

Reputation:

You could use another class:

function myFunction () {
  $(this).toggleClass('buttonClassB');
};
.buttonClassB {
    background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="myFunction.call(this)">Click me</button>

You could also use the style attribute :

function myFunction () {
    $(this).css('background', 'red');
    // <button style="background:red">
};

Links :

Upvotes: 4

kasper Taeymans
kasper Taeymans

Reputation: 7026

you could do it this way

Working demo: http://jsfiddle.net/J68sp/

$('button').on('click', function(){
    var btn=$(this);
    if(btn.attr('class')=='buttonClassA'){

         btn.removeClass('buttonClassA').addClass('buttonClassB');
    }
    else{
        btn.removeClass('buttonClassB').addClass('buttonClassA');
    }

})

Upvotes: 1

ZER0
ZER0

Reputation: 25322

How should I do it? Should I create another class buttonClassB in which I just change background color and copy all other things from buttonClassA? If this is the approach, then how can I change the class of the button at runtime when button is clicked? Please suggest?

You do not need to copy everything. You can just add the CSS properties you want to change. The rest will be inherited. So let's say only the background:

.buttonClassB {
    background: #398525; /* old browsers */
    background: linear-gradient(to bottom, #8DD297, #398525); /* standard */
    background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* old firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */
 }

I would also suggest to use the unprefixed and standard value in your code – some browsers already have them, as Firefox.

Then, you can simple toggle the class when a button is clicked. Depends if you want remove the class when the same button is clicked again, you have to use addClass or toggleClass:

$(".buttonClassA").on("click", function() {
    $(this).toggleClass("buttonClassB");
});

Just replace toggleClass with addClass if you want make the change persistent instead of toggle it.

Upvotes: 1

Rajesh Paul
Rajesh Paul

Reputation: 7019

in place of onclick=myFunction() use the following JS code:

onclick="this.className=''; this.style.backgroundColor='gray';

If you dont need much of CSS to define the new style then you can simply modify some of the style attributes(e.g. in this case background-color) you can simply use JS to control that.

Upvotes: 1

Chirag Arvadia
Chirag Arvadia

Reputation: 1200

Yes, you can add/remove class using jquery

$(document).ready(function () {        
        $("#button1,#button2,#button3,#button4").live("click", function () {
            $(this).removeClass("buttonClassA");
            $(this).addClass("buttonClassB");
        });
    });

Upvotes: 3

Alessandro Minoccheri
Alessandro Minoccheri

Reputation: 35973

In jQuery you can do this to remove tha actual class and assign another class to your element:

$(document).ready(function(){
    $('.buttonClassA').click(function(){
       $(this).removeClass('buttonClassA').addClass('buttonClassB');
    });
});

inside your css put another class called .buttonClassb

buttonClassB
{
    /*your style*/
}

Upvotes: 2

Sergio
Sergio

Reputation: 28837

Making another class just for the background can be a good idea. Then you can remove the inline script and use something like this:

$('.buttonClassB').click(function(){
     $(this).addClass('buttonClassB');
});

If you want it to go back again on click you could use toggleClass('buttonClassB')

Upvotes: 1

Related Questions