如何选择按钮组并更改颜色？

Question

I need to design buttons (I'm using bootstrap) in the Blazor project. I have 2 button groups on one Razor page. 3 to 4 buttons in each group. I want to use Javascript to change the color button which is onclick function.

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.

2. The onclick call need to be here <div class="btn-group"> because I already have onclick on my button <button type="button" class="btn btn-primary" @onclick="() => UpdateTheChart(13)">@Language.T37</button>

I have tried :focus in CSS but only 1 button can be select. This is my code, I take out the onclick in button for test purposes.

 .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

 function switch_to_green(el){ //Check clicked button is on the same group if(el.parentElement.getAttribute("data-group") == 1){ //Get all buttons of group 1 let g1_buttons = document.querySelectorAll('#group1.btn'); for(let i =0; i<g1_buttons.length;i++){ //Remove green color from unselected buttons g1_buttons[i].classList.remove('green'); } }else{ //Get all buttons of group 2 let g2_buttons = document.querySelectorAll('#group2.btn'); for(let i =0; i<g2_buttons.length;i++){ //Remove green color from unselected buttons g2_buttons[i].classList.remove('green'); } } //Add green color to the only selected one el.classList.add('green'); }

 .btn:hover { font-weight: bold; color: white; /*green*/ background-color: #85c995; }.btn.green{ color: white; /*green*/ background-color: #85c995; }

 <div class="row"> <div class="column" style="width:30%"> <div class="btn-group" id="group1" data-group="1"> <button type="button" class="btn btn-primary" style="outline-color:red; " onclick="switch_to_green(this)">Sunday</button> <button type="button" class="btn btn-primary" onclick="switch_to_green(this)">Tuesday</button> <button type="button" class="btn btn-primary" onclick="switch_to_green(this)">Friday</button> </div> </div> <div class="column" style="width:70%"> <div class="btn-group" id="group2" data-group="2"> <button type="button" class="btn btn-primary" onclick="switch_to_green(this)">9 am</button> <button type="button" class="btn btn-primary" onclick="switch_to_green(this)">2 pm</button> <button type="button" class="btn btn-primary" onclick="switch_to_green(this)">5 pm</button> <button type="button" class="btn btn-primary" onclick="switch_to_green(this)">8 pm</button> </div> </div> </div>