Button color change when selected in button group

Question

I have 2 button groups on one HTML page. 3 to 4 buttons in each group (button using bootstrap). I want to use Javascript to change the color button when clicking without onclick.

User will click any button from group 1 (when clicking change color to green) and click the button from group 2 without deselecting button from group 1.

.show {
  display          : block;
  }
.btn-group {
  margin-top       : 20px;
  overflow         : hidden;
  }
.btn {
  font-weight      : bold;
  color            : white;
  border           : none;
  outline          : none;
  padding          : 12px 16px;
  /*blue*/
  background-color : #2c75ff;
  cursor           : pointer;
  }
.btn:hover {
  font-weight      : bold;
  color            : white;
  /*green*/
  background-color : #85c995;
  }

<div class="row">
  <div class="column" style="width:30%">
    <div class="btn-group" >
      <button type="button" class="btn btn-primary" style="outline-color:red; ">Sunday</button>
      <button type="button" class="btn btn-primary" >Tuesday</button>
      <button type="button" class="btn btn-primary" >Friday</button>
    </div>
  </div>
  <div class="column" style="width:70%">
    <div class="btn-group" >
      <button type="button" class="btn btn-primary" >9 am</button>
      <button type="button" class="btn btn-primary">2 pm</button>
      <button type="button" class="btn btn-primary">5 pm</button>
      <button type="button" class="btn btn-primary" >8 pm</button>
    </div>
  </div>
</div>

Does this answer your question? [How to style a clicked button in CSS](https://stackoverflow.com/questions/44263892/how-to-style-a-clicked-button-in-css) — Professor Abronsius, Mar 12 '21 at 08:24
This can be done with `:focus`, but when the focus is changed, the button color will return to its original color. And this is not the norm. Maybe onclick is better? — s.kuznetsov, Mar 12 '21 at 08:27
@s.kuznetsov For me, I use :focus but It will only allow to click button from 1 group only. Means I cant click the second group of buttons without the first group been deselected. — nur253, Mar 12 '21 at 08:34
@s.kuznetsov I cant use onclick because I already have onclick (for this button) for another function. — nur253, Mar 12 '21 at 08:36
Please consider using checkboxes instead of button tags. You can make checkboxes look like buttons. — Miu, Mar 12 '21 at 08:52

James · Answer 1 · 2021-03-12T08:55:44.647

First, give your first group of buttons an ID, like so:

<div class="row">
  <div class="column" style="width:30%">
    <div class="btn-group" id="btn-group-a">
      <button type="button" class="btn btn-primary" style="outline-color:red; ">Sunday</button>
      <button type="button" class="btn btn-primary" >Tuesday</button>
      <button type="button" class="btn btn-primary" >Friday</button>
    </div>
  </div>
  <div class="column" style="width:70%">
    <div class="btn-group" >
      <button type="button" class="btn btn-primary" >9 am</button>
      <button type="button" class="btn btn-primary">2 pm</button>
      <button type="button" class="btn btn-primary">5 pm</button>
      <button type="button" class="btn btn-primary" >8 pm</button>
    </div>
  </div>
</div>

Now, we can assign event listeners to each button in this group using a forEach loop in javaScript.

If you already have a .js file, the following code can go in there. Otherwise, make a <script></script> tag at the end of your HTML and add it in there instead.

const groupA = document.querySelector("#btn-group-a");
// get our div with buttons

const groupABtns = groupA.querySelectorAll("button");
// select all of our buttons within this div

// Loop through our array of buttons, and add a click event for each
groupABtns.forEach(btn => {
    addEventListener("click", () => {
        btn.style.backgroundColor = 'green'
    });
})

This will loop through your array of buttons in the first group, and add an event listener to each. Now, each button will have a style attribute set that changes its background colour to green.

I hope this is what you were after.

** Also note, this doesn't actually 'select' any buttons, all this does is change their colour to green. That functionality would be slightly more complex. **

Button color change when selected in button group

1 Answers1