Change the color of a button when clicked with javascript

Question

i want to change the color of a button ONLY when clicked, and when i click OTHER element i want it to change to its original color, I already get how to change the color, but i dont know what could be the logic to return it back to the original background when I click other button

<div class="button-categories">
  <a href="#" class="button-categories-link">Candidates</a>
</div>
<div class="button-categories">
  <a href="#" class="button-categories-link">Contacts/Guests</a>
</div>
<div class="button-categories">
  <a href="#" class="button-categories-link">Jobs</a>
</div>
<div class="button-categories">
  <a href="#" class="button-categories-link">Clients</a>
</div>

<script>
  categoriesButton.forEach(function (button, index) {
    button.addEventListener('click', function (e) {
      this.style.background = '#1976d2';
      this.style.color = '#fff';
    });
  });
</script>

You need to update each button seperatly by iterating through them in the click event. categoriesButton.forEach(button => {button.style.color = "red";}); or whatever color that button should be, and then set the color of the targeted button afterwards to the desired new color — NickG, Feb 26 '22 at 16:29
@NickG Inline styles should be avoided as they are the most specific type of style and therefore the hardest to override later on. Use CSS classes whenever possible. — Scott Marcus, Feb 26 '22 at 17:27

Scott Marcus · Accepted Answer · 2022-02-26T17:17:37.577

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
  if(evt.target.classList.contains("button-categories-link")){
    // Loop over all the buttons & remove the active class
    buttons.forEach(function(button){
      button.classList.remove("active");
    });
    // Make the clicked button have the active class
    evt.target.classList.add("active");
  }
});

.active { background-color:#ff0;  }

<div class="button-categories">
  <a href="#" class="button-categories-link">Candidates</a>
</div>
<div class="button-categories">
  <a href="#" class="button-categories-link">Contacts/Guests</a>
</div>
<div class="button-categories">
  <a href="#" class="button-categories-link">Jobs</a>
</div>
<div class="button-categories">
  <a href="#" class="button-categories-link">Clients</a>
</div>

But, you really shouldn't be using hyperlinks if you aren't using them for navigation. That's semantically incorrect and will cause problems for users who rely on assistive technologies for web page access. Instead, any visible element can be made to be clickable by setting up a click event handler for it. But, in your case, since you want "button-like" behavior, why not use the button element? You can style them however you like if you don't like the native presentation.

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

// 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
  if(evt.target.classList.contains("button-categories")){

    // Loop over all the buttons & remove the active class
    buttons.forEach(function(button){
      button.classList.remove("active");
    });
    // Make the clicked button have the active class
    evt.target.classList.add("active");
    
  }
});

button.button-categories {
  display:block;
  border:none;
  background-color:rgba(0,0,0,0);
}

button.button-categories.active { 
  background-color:rgba(255,255,0,1); 
}

<button class="button-categories">Candidates</button>
<button class="button-categories">Contacts/Guests</button>
<button class="button-categories">Jobs</button>
<button class="button-categories">Clients</button>

Alexander van Oostenrijk · Answer 2 · 2022-02-26T17:06:54.137

blur won't do the trick; you'd use that for elements that hold focus like input. Instead, when one of the buttons is clicked, you'll need to go through the other buttons in the collection and reset their colors before setting the color of the clicked button:

categoriesButton.forEach(button => {
  button.addEventListener('click', function (e) {
    // Reset all buttons:
    const buttons = document.getElementsByClassName('button-categories');
    Array.from(buttons).forEach(b => {
      b.style.background = 'transparent';
      b.style.color = 'auto';
    });  
    // Apply colors for this button:
    this.style.background = '#1976d2';
    this.style.color = '#fff';
  });
});

(The answer using .active is actually better if you have only these buttons. When I read the question, I assumed you'd want to keep one of your buttons colored even when another button, unrelated to this button set, is clicked.)

There are several things wrong here. [Don't use `getElementsByClassName()`](https://stackoverflow.com/questions/54952088/how-to-modify-style-to-html-elements-styled-externally-with-css-using-js/54952474#54952474) or inline styles (hardest to override later). Also, rather than setting up event handlers on each button (which takes up resources) use event delegation (see my answer for example). `Array.prototype.forEach()` is supported on node lists so `Array.from()` is redundant. Don't scan the DOM for the same elements over and over in each event handler. Get the node list once. — Scott Marcus, Feb 26 '22 at 17:22

score -1 · Answer 3 · answered Feb 26 '22 at 16:35

-1

You have to write onblur event to change the button color back to its original color. So, when you click on other element, onblur event will trigger and change the color.

answered Feb 26 '22 at 16:35

krthi_66

72
6

This is not an answer since you give no guidance or example on how to do what you are saying. It should be a comment. – Scott Marcus Feb 26 '22 at 17:19

Change the color of a button when clicked with javascript

3 Answers3