CODEWITHSUNDEEP
javascripthtmljquerycss
IU Kottahchchi
IU Kottahchchi

Reputation: 109

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

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>

Upvotes: 1

Views: 3028

Answers (3)

Edgar Reynaga
Edgar Reynaga

Reputation: 392

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>

Upvotes: 1

poo
poo

Reputation: 1230

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>

Upvotes: 1

Monish Khatri
Monish Khatri

Reputation: 980

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

        }

Upvotes: 0

Related Questions