How to change the color of another button when a button click?-CodePudding

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  id="btn1" onclick="myFunction(1)">Upvote </button>
<button  id="btn2" onclick="myFunction(-1)">Down Vote</button>

CodePudding user response：

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  id="btn1" onclick="myFunction(1)">Upvote </button>
<button  id="btn2" onclick="myFunction(-1)">Down Vote</button>

CodePudding user response：

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" >Up Vote</button>
<button id="btn-down" >Down Vote</button>

CodePudding user response：

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 = '';
          
            }

        }