在按钮组中选择时按钮颜色更改

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.

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

Answer 1

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