Change the color of a button when clicked with javascript-CodePudding

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 >
  <a href="#" >Candidates</a>
</div>
<div >
  <a href="#" >Contacts/Guests</a>
</div>
<div >
  <a href="#" >Jobs</a>
</div>
<div >
  <a href="#" >Clients</a>
</div>

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

CodePudding user response：

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 >
  <a href="#" >Candidates</a>
</div>
<div >
  <a href="#" >Contacts/Guests</a>
</div>
<div >
  <a href="#" >Jobs</a>
</div>
<div >
  <a href="#" >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 >Candidates</button>
<button >Contacts/Guests</button>
<button >Jobs</button>
<button >Clients</button>

CodePudding user response：

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.)

CodePudding user response：

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.