Steps to altering the color of a second button with a button click

Question

Steps to altering the color of a second button with a button click

My goal is to create a button click function that allows only one button to be clicked at a time. For instance, when btn1 is clicked, its background color changes from transparent to green. Then, if btn2 is clicked, btn1's background color should change from green to red, and btn2's background color should become transparent. Additionally, I want to implement a toggle feature 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>

javascript html jquery css

Answer 1

Answer №1

To remove a class from an element, you can utilize the element.classList.remove() method.

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

To remove a class from an element, you can utilize the element.classList.remove() method.

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 3

Answer №2

By using jQuery's toggleClass, you can create a neat solution for dynamically altering the background color of 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 4

By using jQuery's toggleClass, you can create a neat solution for dynamically altering the background color of 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 5

Answer №3

Upon reviewing your code, I have made some modifications to your JavaScript function to meet your desired outcome:

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

Answer 6

Upon reviewing your code, I have made some modifications to your JavaScript function to meet your desired outcome:

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

Steps to altering the color of a second button with a button click

Answer №1

Answer №2

Answer №3

Similar questions

Please note: With React 18, the use of ReactDOM.render is no longer supported. Instead, we recommend using create

Show a notification when utilizing AJAX requests

Ways to send users to a different page with parameters without relying on cookies

Customizing animations for birds

The <a> tag is failing to cover the appropriate section of the <div> element

An error occurred while the server was processing the request during an Ajax POST operation

"Attempting to dynamically include Components for SSR bundle in React can result in the error message 'Functions are invalid as a React child'. Be cautious of this

What's preventing me from tapping on hyperlinks on my mobile device?

Sending both an array and an image via Ajax in a single request

Ways to display pictures by invoking an API within the antd item list container

"Proper Installation of Angular Project Dependencies: A Step-by-Step

Node.js module loader compared to client-side AMD loader such as RequireJS

When first accessing the page, the map may not load properly. However, a simple refresh of the page in VueJS should resolve this issue and allow the

Tips for incorporating dynamic parameters/variables into templates displayed using ng-bind-html or a custom directive (within ng-repeat)

Assign a value to a HubSpot hidden form field by utilizing Javascript

Does the server transmit HTML page content rather than the information you need?

Automatically fill in input fields in a form by selecting options from a dropdown menu and extracting data

Create a specialized angular controller

Is Intellisense within HTML not available in SvelteKit when using TypeScript?

Having trouble capturing screenshots with PuppeteerJS?