单击按钮时如何更改另一个按钮的颜色？

Question

I need to allow only one button to click at once. As an example, if user clicks on btn1 then its background color change from transparent to green. Then if user clicks on btn2, btn1 background color should be changing from transparent to red,and btn1 background color should be changing from green to transparent. Additionally I need a toggle for both buttons

 function myFunction(str) { var element = document.getElementById("btn1"); var element1 = document.getElementById("btn2"); if(str==1){ document.getElementById("btn2").style.backgroundColor =""; element.classList.toggle("mystyle"); }else{ element1.classList.toggle("mystyle1"); document.getElementById("btn1").style.backgroundColor =""; } }

 .mystyle { background-color: green; color: white; }.mystyle1 { background-color: red; color: white; }

 <button class="" id="btn1" onclick="myFunction(1)">Upvote </button> <button class=""id="btn2" onclick="myFunction(-1)">Down Vote</button>

Answer 1

You can use the element.classList.remove()

 function myFunction(str) { var element = document.getElementById("btn1"); var element1 = document.getElementById("btn2"); if(str==1){ element1.classList.remove("mystyle1"); element.classList.toggle("mystyle"); }else{ element1.classList.toggle("mystyle1"); element.classList.remove("mystyle"); } }

 .mystyle { background-color: green; color: white; }.mystyle1 { background-color: red; color: white; }

 <button class="" id="btn1" onclick="myFunction(1)">Upvote </button> <button class=""id="btn2" onclick="myFunction(-1)">Down Vote</button>

Answer 2

Utilizing jQuery's toggleClass you can write a clean solution to dynamically change the background color of the buttons.

 var btnUp = $('#btn-up'); var btnDown = $('#btn-down'); btnUp.click(function() { $(this).toggleClass('btn-green'); btnDown.removeClass('btn-red'); }); btnDown.click(function() { $(this).toggleClass('btn-red'); btnUp.removeClass('btn-green'); });

 .btn { background-color: transparent; }.btn-green { background-color: green; }.btn-red { background-color: red; }

 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <button id="btn-up" class="btn">Up Vote</button> <button id="btn-down" class="btn">Down Vote</button>

Answer 3

After reading your code I've done some changes in your js function and it will work as per your expectation:

function myFunction(str) {
         var element = document.getElementById("btn1");
         var element1 = document.getElementById("btn2");
            
           if(str==1){
           
               element.classList.toggle("mystyle");
               element1.className = '';
           
            } else{
            
               element1.classList.toggle("mystyle1");
               element.className = '';
          
            }

        }