Change Button Color When Click on the Button

Change Button color onClick

There are indeed global variables in javascript. You can learn more about scopes, which are helpful in this situation.

Your code could look like this:

var count = 1;
function setColor(btn, color) {
var property = document.getElementById(btn);
if (count == 0) { = "#FFFFFF"
count = 1;
else { = "#7FFF00"
count = 0;

Hope this helps.

Change the color of a button when clicked with javascript

You'll need to set up an event handler so that when any button gets clicked, all the buttons are reset so that no one of them is active. Then, set the clicked button to be active by styling it. But, instead of setting up multiple handlers, just set up one at the document level that will receive any clicks via bubbling ("event delegation").

// Get all the buttons into a node list
let buttons = document.querySelectorAll(".button-categories-link");

// Set an event handler on the document so that when
// any element is clicked, the event will bubble up to it
document.addEventListener("click", function(evt){
// Check to see if it was a button that was clicked
// Loop over all the buttons & remove the active class
// Make the clicked button have the active class"active");
.active { background-color:#ff0;  }
<div class="button-categories">
<a href="#" class="button-categories-link">Candidates</a>
<div class="button-categories">
<a href="#" class="button-categories-link">Contacts/Guests</a>
<div class="button-categories">
<a href="#" class="button-categories-link">Jobs</a>
<div class="button-categories">
<a href="#" class="button-categories-link">Clients</a>

Change Button Color when click on the Button

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=""></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>

How can I change button color when clicked

You can check if the attr value is undefined or not using (typeof $(this).attr("data-toggle")) !== 'undefined'

Demo Code :

$('.btn--primary').on("click", function(e) {
//check if the attr type is not undefined
(typeof $(this).attr("data-toggle")) !== 'undefined' ? "" : $(this).removeClass("btn--ghost").addClass("btn--plain");
.btn--ghost {
color: red;

.btn--plain {
color: blue
<script src=""></script>
<div class="o-block-global__links link_choice ">
<button type="button" class="btn btn--ghost btn--primary">

<button type="button" class="btn btn--ghost btn--primary" data-toggle="modal" data-target="#modalChoice2">

Editing Javascript to change button color once clicked

All you need to do is create a check if current[0] is undefined or not, this should work just fine

var header = document.getElementById("buttonscontainer");
var btns = header.getElementsByClassName("button");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
if(current[0] != undefined){
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
.button {
background-color: #92afde;
margin: 10px;
color: #ffffff;
font-weight: bold;
text-align: center;
border: solid 2px #92afde;
border-radius: 5px;
width: 150px;

.active, .button:hover {
background-color: #32a852;
<div id="buttonscontainer">
<div class="button">Test1</div>
<div class="button">Test2</div>
<div class="button">Test3</div>
<div class="button">Test4</div>
<div class="button">Test5</div>

Change color button when click with Razor Page

I use css(.btn:focus) and it can work.Here is a demo:

<div class="row">
<div class="column" style="width:30%">
<div class="btn-group">
<button type="button" class="btn btn-primary">Language.T35</button>
<button type="button" class="btn btn-primary">Language.T36</button>
<button type="button" class="btn btn-primary">Language.T37</button>
<div class="column" style="width:70%">
<div class="btn-group">
<button type="button" class="btn btn-primary">Language.T138</button>
<button type="button" class="btn btn-primary">Language.T38</button>
<button type="button" class="btn btn-primary">Language.T39</button>
<button type="button" class="btn btn-primary">Language.T40</button>
.btn:focus {
background-color: #ff6e40;

Sample Image

Related Topics

Leave a reply