Change the color of a button when clicked with javascript

Issue

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>

Solution

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>

Answered By - Scott Marcus