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";
}
Bootstrap Button ColorsUsing one of the default modifier classes will change the color of the text and background color of your buttons. .Btn-danger will make the button red and font white, while . btn-warning will make the button yellow and font black, and so on.
To change the background color of the button, use the CSS background-color property and give it a value of a color of your taste. In the .button selector, you use background-color:#0a0a23; to change the background color of the button.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With