Change color of all clicked buttons

Question

I have a set of buttons in an html page of the following form:

<button
      id="testID"
      mat-mini-fab
      ngClass="list-button"
      (click)="onClick($event)"
    >
      Press
    </button>

I try to change the color of each button belonging to .list-button class after clicking on it using the following css code:

.list-button:focus {
  background-color: #7d698d;
}

However, while the color of the button I click each time changes (the color of all the previously clicked buttons also changes back to their original color). How could I fix it? I want all the clicked buttons to remain their new color.

I also tried assigning an id to the buttons of this class and changing their color inside the onClick() method as follows without success. The same problem remains. Could you help me, please?

  onclick(event: any) {
    const btn = document.getElementById('testID');
    if (btn) btn.style.backgroundColor = '#7d698d';
  }

Answer 1

• ID must be unique
• You can use the function and pass el which will refer to this as an argument function onClick(el){......} and use it onClick(this)
• No need to get the id you can directly use el.style or event.target.style see the next examples

function onClick(el){
  el.style.backgroundColor = '#7d698d';
}

<button
  id="testID-1"
  mat-mini-fab
  ngClass="list-button"
  onclick="onClick(this)"
>
  Press
</button>

<button
  id="testID-2"
  mat-mini-fab
  ngClass="list-button"
  onclick="onClick(this)"
>
  Press
</button>

Also You can use the function and pass event which equal event as an argument function onClick(event){......} and use it onClick(event)

function onClick(event){
  event.target.style.backgroundColor = '#7d698d';
}

<button
  id="testID-1"
  mat-mini-fab
  ngClass="list-button"
  onclick="onClick(event)"
>
  Press
</button>

<button
  id="testID-2"
  mat-mini-fab
  ngClass="list-button"
  onclick="onClick(event)"
>
  Press
</button>

Answer 2

You need to get the id of the button that fired the event

onclick(event: any) {
  const btn = document.getElementById(event.target.id);
  if (btn) btn.style.backgroundColor = '#7d698d';
}

Answer 3

The reason why the color of the previously clicked buttons is resetting after you click on another one is that the focus is set on the last clicked button. Try using the code in the Venkatesh's answer.

Answer 4

No need for js. Use the focus selector in your stylesheet.

The :focus selector is allowed on elements that accept keyboard events or other user inputs.

~ W3

button.list-button:focus {
  background-color: #7d698d;
  color: white;
}

<button class="list-button">Click</button>

Edit ~ with js. This method uses .querySelectorAll("button") and toggles the styled class .focus each time the button(s) are clicked. This works well when having multiple buttons.

// Get all the elements on the basis of query selector (button)
let btn = document.querySelectorAll("button");

for (var i = 0; i < btn.length; i++) {
  (function(index) {
    btn[index].addEventListener("click", function() {
      console.log("Clicked Button: " + index);

      let isPresent = false;

      // Checks if the class is present or not
      this.classList.forEach(function(e, i) {
        if (e == "focus") {
          isPresent = true;
        } else {
          isPresent = false;
        }
      });

      // Toggles the presence of class (.focus) on the basis of the isPresent variable
      if (isPresent) {
        this.classList.remove("focus");
      } else {
        this.classList.add("focus");
      }
    });
  })(i);
}

.focus {
  background-color: #7d698d;
  color: white;
  cursor: pointer;
}

<button id="btn">Click</button>
<button id="btn">Click</button>
<button id="btn">Click</button>