Update Button Colour upon clicking the Button

Question

Update Button Colour upon clicking the Button

I have multiple buttons lined up in a row on my webpage. I want the button's color to change when I click on them. Below is a snippet of my code:

$( "button.change" ).click(function() {
  $(this).toggleClass( "selected" );
});

.Button {
    font-family: Calibri, sans-serif;
    font-size:13px;
    font-weight: bold;
    width: 160px;
    height: 25px;
    background:grey;
    color: white
}
.selected {
    color: white;
    background:green
}
button#cssColorChange:active{
    color: white;
    background:red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<button class="Button change" id="jQueryColorChange">Click to change color</button>
<br><br>
<button class="Button change" id="jQueryColorChange">Click to change color</button>
<br><br>
<button class="Button change" id="jQueryColorChange">Click to change color</button>
<br><br>
<button class="Button change" id="jQueryColorChange">Click to change color</button>

This code works fine, but currently each button changes color when clicked. I want only the clicked button to change its color, while others remain unchanged.

javascript jquery html css

Answer 1

Answer №1

Is this the kind of thing you're looking for?

$( "button.change" ).click(function() {
  $( "button.change.selected" ).removeClass("selected");
  $(this).toggleClass( "selected" );
});

.Button {
    font-family: Arial, sans-serif;
    font-size:14px;
    font-weight: bold;
    width: 180px;
    height: 30px;
    background:lightgrey;
    color: black
}
.selected {
    color: black;
    background:lightgreen
}
button#cssColorChange:active{
    color: black;
    background:pink
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<button class="Button change" id="jQueryColorChange">Click to change color</button>
<br><br>
<button class="Button change" id="jQueryColorChange">Click to change color</button>
<br><br>
<button class="Button change" id="jQueryColorChange">Click to change color</button>
<br><br>
<button class="Button change" id="jQueryColorChange">Click to change color</button>

Answer 2

Is this the kind of thing you're looking for?

$( "button.change" ).click(function() {
  $( "button.change.selected" ).removeClass("selected");
  $(this).toggleClass( "selected" );
});

.Button {
    font-family: Arial, sans-serif;
    font-size:14px;
    font-weight: bold;
    width: 180px;
    height: 30px;
    background:lightgrey;
    color: black
}
.selected {
    color: black;
    background:lightgreen
}
button#cssColorChange:active{
    color: black;
    background:pink
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<button class="Button change" id="jQueryColorChange">Click to change color</button>
<br><br>
<button class="Button change" id="jQueryColorChange">Click to change color</button>
<br><br>
<button class="Button change" id="jQueryColorChange">Click to change color</button>
<br><br>
<button class="Button change" id="jQueryColorChange">Click to change color</button>

Answer 3

Answer №2

To implement the desired functionality, it is necessary to remove the selected class from all buttons (to clear the styling of any previously selected button) and then apply it to the clicked button. Each button should have a unique ID or none at all, as the class is sufficient for this purpose. Additionally, the buttons should be spaced out using CSS rather than double line breaks.

$("button.change").click(function() {
  $(".change").removeClass('selected');
  $(this).addClass( "selected" );
});

.Button {
    font-family: Calibri, sans-serif;
    font-size:13px;
    font-weight: bold;
    width: 160px;
    height: 25px;
    background: grey;
    color: white;
    display: block;
    margin: 1em;
}
.selected {
    color: white;
    background: green;
}
button#cssColorChange:active{
    color: white;
    background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<button class="Button change">Click to change color</button>
<button class="Button change">Click to change color</button>
<button class="Button change" >Click to change color</button>
<button class="Button change">Click to change color</button>

Answer 4

To implement the desired functionality, it is necessary to remove the selected class from all buttons (to clear the styling of any previously selected button) and then apply it to the clicked button. Each button should have a unique ID or none at all, as the class is sufficient for this purpose. Additionally, the buttons should be spaced out using CSS rather than double line breaks.

$("button.change").click(function() {
  $(".change").removeClass('selected');
  $(this).addClass( "selected" );
});

.Button {
    font-family: Calibri, sans-serif;
    font-size:13px;
    font-weight: bold;
    width: 160px;
    height: 25px;
    background: grey;
    color: white;
    display: block;
    margin: 1em;
}
.selected {
    color: white;
    background: green;
}
button#cssColorChange:active{
    color: white;
    background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<button class="Button change">Click to change color</button>
<button class="Button change">Click to change color</button>
<button class="Button change" >Click to change color</button>
<button class="Button change">Click to change color</button>

Answer 5

Answer №3

Consider using this alternative JQuery script

$( "button.change" ).click(function() {
  $('button').removeClass( "active" );
  $(this).toggleClass( "active" );
});

The above code snippet removes the .active class from all buttons and then adds the class only to the button that has been clicked.

Answer 6

Consider using this alternative JQuery script

$( "button.change" ).click(function() {
  $('button').removeClass( "active" );
  $(this).toggleClass( "active" );
});

The above code snippet removes the .active class from all buttons and then adds the class only to the button that has been clicked.

Answer 7

Answer №4

If you're looking to enhance the functionality of disabling the button when it's clicked again, check out the example below:

$( "button.change" ).click(function() {
  $(this).toggleClass( "selected" );
$("button.selected").not(this).removeClass("selected")
});

.Button {
    font-family: Calibri, sans-serif;
    font-size:13px;
    font-weight: bold;
    width: 160px;
    height: 25px;
    background:grey;
    color: white
}
.selected {
    color: white;
    background:green
}
button#cssColorChange:active{
    color: white;
    background:red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="Button change" id="">Click to change color</button>
<br><br>
<button class="Button change" id="">Click to change color</button>
<br><br>
<button class="Button change" id="">Click to change color</button>
<br><br>
<button class="Button change" id="">Click to change color</button>

Answer 8

If you're looking to enhance the functionality of disabling the button when it's clicked again, check out the example below:

$( "button.change" ).click(function() {
  $(this).toggleClass( "selected" );
$("button.selected").not(this).removeClass("selected")
});

.Button {
    font-family: Calibri, sans-serif;
    font-size:13px;
    font-weight: bold;
    width: 160px;
    height: 25px;
    background:grey;
    color: white
}
.selected {
    color: white;
    background:green
}
button#cssColorChange:active{
    color: white;
    background:red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="Button change" id="">Click to change color</button>
<br><br>
<button class="Button change" id="">Click to change color</button>
<br><br>
<button class="Button change" id="">Click to change color</button>
<br><br>
<button class="Button change" id="">Click to change color</button>

Answer 9

Answer №5

<button id="clickMeButton" onclick="modifyColor()">Modify Background</button>;

<script>;
    var clickMeButton = document.getElementById("clickMeButton");
    function modifyColor(){
        clickMeButton.style.backgroundColor = "blue";

    };
</script>;

Answer 10

<button id="clickMeButton" onclick="modifyColor()">Modify Background</button>;

<script>;
    var clickMeButton = document.getElementById("clickMeButton");
    function modifyColor(){
        clickMeButton.style.backgroundColor = "blue";

    };
</script>;

Answer 11

Answer №6

It is important to ensure that each element has a unique id assigned to it, as using the same id for multiple elements can cause issues.

$('button.change').click(function() {
  $(this).toggleClass('selected');
})

By the way, your code is functioning correctly. Here's the link to the working example: https://jsbin.com/kodaxiyale/edit

Answer 12

It is important to ensure that each element has a unique id assigned to it, as using the same id for multiple elements can cause issues.

$('button.change').click(function() {
  $(this).toggleClass('selected');
})

By the way, your code is functioning correctly. Here's the link to the working example: https://jsbin.com/kodaxiyale/edit

Update Button Colour upon clicking the Button

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Start up a server-side JavaScript instance utilizing Express

Utilizing PHP loops with the integration of a Datetimepicker

"Error 404: Invalid request encountered while using React and

How can I use JavaScript or CSS to identify the specific line on which certain words appear in the client's browser?

What is the best way to include JSX in a separate HTML file?

Ordering BufferGeometries in Three.js for Accurate Rendering

The declaration file for the module 'tailwind-scrollbar' could not be located

Using JavaScript, transform a client's date/time string into a JSON-compatible date/time string

Ngrx/effects will be triggered once all actions have been completed

Node.js Middleware Design Pattern: Connectivity Approach

Tips for changing the color of shapes when hovering over an image state

Position the second line of text to align in MUI

Angular-powered SPAs with cookie authentication

A guide to designing a responsive flexbox layout with various columns and rows

A comparison of Vue's import paths: exploring the variations

What is the reason for AngularJS's inclusion of a colon at the end of a data object in an $http post

Node.js server experiencing delays due to V8 processing constraints

Conceal the div element if the screen size drops below a certain threshold

How to efficiently load 3000 objects in Openlayers using IE8

Discovering the art of line breaks