Changing the Color of button on Click in bootstrap

Question

I am trying to change the color of the button on click . I am doing it on the Bootstrap button which is blue. But my code is not working.

With my JavaScript code following, it is not changing the color.

<button type="button" id="btnOUs" class="btn btn-primary" ng-click="levelOU()">Organization Units </button>
</button>

<button type="button" id="btnchiefdom" class="btn btn-primary" ng-click="levelCD()">Chiefdom</button>
</button>

<button type="button" id="btndistrict" class="btn btn-primary" ng-click="levelD()">District </button>
</button>

<button type="button" id="btnfaciltiy" class="btn btn-primary" ng-click="levelF()">Facility </button>
</button>

Here is the javascript code:

var b1 = document.getElementById("btnOUS");
var b2 = document.getElementById("btnchiefdom");
var b2 = document.getElementById("btndistrict");
var b2 = document.getElementById("btnfacility");

b1.onclick = function() {
     b1.style.background = "green";
     b2.style.background = "";   
}

b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}

b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}
b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}

Wrap all your code in `window.onload=function(){/*your code here*/}` — leo.fcx, Dec 07 '15 at 23:18
@imadfookifooki you get this error because you're trying to set onclick to element with wrong `id`, check my answer. — Zakaria Acharki, Dec 07 '15 at 23:19

score 15 · Accepted Answer · answered Dec 07 '15 at 23:29

15

See this functional example:

$("button").click(function(){
  $("button").removeClass("active");
  $(this).addClass("active");
});

.active {
  background-color: green !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<button type="button" id="btnOUs" class="btn btn-primary" ng-click="levelOU()">Organization Unitss </button>
            <button type="button" id="btnchiefdom" class="btn btn-primary" ng-click="levelCD()">Chiefdom</button>
            <button type="button" id="btndistrict" class="btn btn-primary" ng-click="levelD()">District </button>
            <button type="button" id="btnfaciltiy" class="btn btn-primary" ng-click="levelF()">Facility </button>

answered Dec 07 '15 at 23:29

Gilberto Sánchez

597
3
8

When you click on button,`active` class is assigned to the clicked button, but first, all buttons with the `active` class will be cleaned. – Gilberto Sánchez Dec 07 '15 at 23:32
Instead of the custom class `active` you can use predefined green class `btn-success`. – Zakaria Acharki Dec 07 '15 at 23:39
1

That's right, but he is using the green color and the `btn-success` class uses `#449D44`, that's my reason. – Gilberto Sánchez Dec 07 '15 at 23:47

Cameron · Answer 2 · 2021-07-23T15:25:59.053

I didn't like the other answers because they either required jquery or !important

In bootstrap, the :active element state for bootstrap buttons is more specified than it is for other element states (to understand what this means, see here). This is why you may find yourself able to control the css of :hover but find that :active mysteriously doesn't work.

The way I got around this was by simply increasing the specificity of my css class. For example:

.my-button:active {
    background-color: green;
}

I changed it to

.my-button:not(:disabled):not(:disabled):active {
   background-color: green;
}

This gives it equal specificity to the bootstrap btn:active. Then I made sure my custom class appears first in the ordering.

<a href="foobar" class="my-button btn btn-primary btn-lg">Connect with Us</a>

Hope this helps! Just my personal solution.

This is far better than using `!important` or using javascript to change its style. — Hansana Dasanayaka, May 15 '23 at 08:15

Zakaria Acharki · Answer 3 · 2017-02-11T22:50:10.177

2

Replace "btnOUS" by "btnOUs" (small s) in :

var b1 = document.getElementById("btnOUS");
_______________________________________^

Hope this helps.

Basic example :

var b1 = document.getElementById("btnOUs");

b1.onclick = function() {
  b1.style.background = "green";  
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<button type="button" id="btnOUs" class="btn btn-primary" ng-click="levelOU()">Organization Units </button>

edited Feb 11 '17 at 22:50

answered Dec 07 '15 at 23:03

Zakaria Acharki

66,747
15
75
101

can you please give more explanation – imadfooki fooki Dec 07 '15 at 23:06
Uncaught TypeError: Cannot set property 'onclick' of null I am getting this error – imadfooki fooki Dec 07 '15 at 23:19
You can see that it work here, in your example you have 3 variable with same name, please try to reorganize your code. – Zakaria Acharki Dec 07 '15 at 23:20

score 1 · Answer 4 · answered Dec 08 '15 at 07:24

1

try this. same for other buttons.just need to change the id name

 $("#btnfacility").click(function () {
            $(this).css({"background-color":"green !important"});
        });

answered Dec 08 '15 at 07:24

score 1 · Answer 5 · edited May 23 '17 at 12:18

Use the following CSS pseudo selector:

active : if you want background color only when the button is clicked and don't want to persist.

btn.btn-primary:active
{
    background-color:grey !important; /* add here any color */
}

  
    
    .btn.btn-warning:hover{
        background: yellow;
    }
    
    /** on active **/
    
   .btn.btn-warning:active{
        background: red;
    }

<div class="col-sm-12" id="my_styles">
         <button type="submit" class="btn btn-warning" id="1">Click me please!!</button>

reference

score 0 · Answer 6 · answered Dec 07 '15 at 23:04

0

Optionally you can create css classes and simply change the class on click.

answered Dec 07 '15 at 23:04

Brian

1,035
7
14

1

This does not answer the question. Also, I think you should provide an example for the alternative that you suggest – leo.fcx Dec 07 '15 at 23:06

score 0 · Answer 7 · answered May 19 '17 at 19:47

0

You can also take two button instead one them should be green and another should be blue and apply show and hind function of jquery.

(#blue).click(function(){ (#blue).hide(); (#green).show(); })

initally #green button should be hide.

answered May 19 '17 at 19:47

Kumar Rahul

79
3

score 0 · Answer 8 · answered Aug 09 '20 at 13:59

0

$("#btnid").click(function (){ $(this).css("color","green"); } Please try this css() function use to style the object. I add on click event of button.

answered Aug 09 '20 at 13:59

Riyas Ac

1,553
1
9
23

score 0 · Answer 9 · answered Oct 29 '21 at 09:59

You can use bootstrap button class to change color of button.

$('.btn-success').on("click",function(){
    $(".btn-success").removeClass('btn-danger');
    $(this).addClass("btn-danger");
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div >
  <button class="btn btn-success">Button 1</button>
  <button class="btn btn-success">Button 2</button>
  <button class="btn btn-success">Button 3</button>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Changing the Color of button on Click in bootstrap

9 Answers9

Linked