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";   
}

Solution 1

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>

Solution 2

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.

Solution 3

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>

Solution 4

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

View more solutions

Comments

[imadfooki fooki]

can you please give more explanation

[leo.fcx]

This does not answer the question. Also, I think you should provide an example for the alternative that you suggest

[imadfooki fooki]

Uncaught TypeError: Cannot set property 'onclick' of null I am getting this error

[Zakaria Acharki]

You can see that it work here, in your example you have 3 variable with same name, please try to reorganize your code.

[Gilberto Sánchez]

When you click on button,active class is assigned to the clicked button, but first, all buttons with the active class will be cleaned.

[Zakaria Acharki]

Instead of the custom class active you can use predefined green class btn-success.

[Gilberto Sánchez]

That's right, but he is using the green color and the btn-success class uses #449D44, that's my reason.