Change Button Color when click on the Button

Question

I have many button in a row in my page. And I need to change the button color, when I click on the Buttons. Here is My sample code

$( "button.change" ).click(function() {
  $(this).toggleClass( "selected" );
});

.Button {
    font-family: Calibri, sans-serif;
    font-size:13px;
    font-weight: bold;
    width: 160px;
    height: 25px;
    background:grey;
    color: white
}
.selected {
    color: white;
    background:green
}
button#cssColorChange:active{
    color: white;
    background:red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<button class="Button change" id="jQueryColorChange">Click to change color</button>
<br><br>
<button class="Button change" id="jQueryColorChange">Click to change color</button>
<br><br>
<button class="Button change" id="jQueryColorChange">Click to change color</button>
<br><br>
<button class="Button change" id="jQueryColorChange">Click to change color</button>

Here it is Working. But here when I click on every buttons, color has been changed. I need, When I click on one Button, color should change for that Button only and the remaining Buttons color should default.

Andrew · Accepted Answer · 2017-05-26 10:40:56Z

Something like this?

$( "button.change" ).click(function() {
  $( "button.change.selected" ).removeClass("selected");
  $(this).toggleClass( "selected" );
});

.Button {
    font-family: Calibri, sans-serif;
    font-size:13px;
    font-weight: bold;
    width: 160px;
    height: 25px;
    background:grey;
    color: white
}
.selected {
    color: white;
    background:green
}
button#cssColorChange:active{
    color: white;
    background:red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<button class="Button change" id="jQueryColorChange">Click to change color</button>
<br><br>
<button class="Button change" id="jQueryColorChange">Click to change color</button>
<br><br>
<button class="Button change" id="jQueryColorChange">Click to change color</button>
<br><br>
<button class="Button change" id="jQueryColorChange">Click to change color</button>

gavgrif · Accepted Answer · 2017-05-26 10:37:43Z

You need to remove the selected class on all the buttons (which clears the styling of the previously selected button) and then apply it to the clicked one. Also the buttons need to have unique ID's or none at all( the clas is sufficient for this function) and you should space the buttons out with CSS rather than the double line breaks.

$("button.change" ).click(function() {
  $(".change" ).removeClass('selected');
  $(this).addClass( "selected" );
});

.Button {
    font-family: Calibri, sans-serif;
    font-size:13px;
    font-weight: bold;
    width: 160px;
    height: 25px;
    background:grey;
    color: white;
    display:block;
    margin: 1em;
}
.selected {
    color: white;
    background:green
}
button#cssColorChange:active{
    color: white;
    background:red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<button class="Button change">Click to change color</button>
<button class="Button change">Click to change color</button>
<button class="Button change" >Click to change color</button>
<button class="Button change">Click to change color</button>

Anubhav · Accepted Answer · 2017-05-26 10:38:13Z

1

Try this JQuery code instead

$( "button.change" ).click(function() {
  $('button').removeClass( "selected" );
  $(this).toggleClass( "selected" );
});

What this does is, first removes .selected class from every button and then applies the class to only the button which has been clicked.

answered May 26, 2017 at 10:38

Anubhav

7,2465 gold badges23 silver badges34 bronze badges

Comments

Mihai T · Accepted Answer · 2017-05-26 10:48:55Z

the above answers work very good . but IF you want to disable the button when you click again on it, see snippet below

$( "button.change" ).click(function() {
  $(this).toggleClass( "selected" );
	$("button.selected").not(this).removeClass("selected")
});

.Button {
    font-family: Calibri, sans-serif;
    font-size:13px;
    font-weight: bold;
    width: 160px;
    height: 25px;
    background:grey;
    color: white
}
.selected {
    color: white;
    background:green
}
button#cssColorChange:active{
    color: white;
    background:red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="Button change" id="">Click to change color</button>
<br><br>
<button class="Button change" id="">Click to change color</button>
<br><br>
<button class="Button change" id="">Click to change color</button>
<br><br>
<button class="Button change" id="">Click to change color</button>

FahithKRM · Accepted Answer · 2024-02-21 08:22:34Z

0

<button id="button" onclick="Change()">Change Color</button>

<script>
    var button = document.getElementById("button")
    function Change(){
        button.style.backgroundColor = "red"

    }
</script>

answered Feb 21, 2024 at 8:22

FahithKRM

1

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Pritesh Panjiker · Accepted Answer · 2017-05-26 10:46:24Z

-1

First of all, please don't use the same id for multiple elements. Id's should be unique.

$('button.change').click(function() {
  $(this).toggleClass('selected');
})

your code is working fine btw, https://jsbin.com/sicifopizi/edit

answered May 26, 2017 at 10:46

Pritesh Panjiker

291 silver badge4 bronze badges

Collectives™ on Stack Overflow

Change Button Color when click on the Button

6 Answers 6

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related