Changing background color of button on click with JQuery doesn't work

Question

I have a button that I want to change its color when the user clicks on it, but it doesn't work and I can't figure out why.

This is what I've tried until now.

$(document).ready(function() {


 });


$('#canvasButtons button').click(function () {
        $('#canvasButtons').children().removeClass('selected-button');
        $(this).addClass('selected-button');
        });

.video-buttons button {
    width: 200px !important;
    height: 66px !important;
    background-color: #484848 !important;
    cursor: pointer !important;
    margin-right: 50px;
}

.selected-button {
  background-color: red !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="display: flex; align-items: center; flex-direction: column;" class="video-buttons" id="canvasButtons">
  <button id="modifyButton">
    <div class="vertical-line"></div>
    <span>Modify B Box</span>
  </button>
</div>

I've added the code snippet here. Can you please let me know why it doesn't work?

1) don't put DIVs in your button 2) check your reference in js — Undry
– Undry, Commented Feb 28, 2021 at 20:10
@Undry relevant for your 2) stackoverflow.com/questions/1827965/… — Dominik
– Dominik, Commented Feb 28, 2021 at 20:21

Dominik · Accepted Answer · 2021-02-28 20:11:46Z

You're having specificity issues in your CSS rather than a problem in you JS.

The specificity of .selected-button is lower than .video-buttons button even when using !important everywhere (which you should avoid).

So to get this to work you have to make the selected-button selector higher specificity than the default styles for it.

.video-buttons button.selected-button should do the trick.

$(document).ready(function() {
  $('#canvasButtons button').click(function () {
    $('#canvasButtons').children().removeClass('selected-button');
    $(this).addClass('selected-button');
  });
});

.video-buttons button {
  width: 200px !important;
  height: 66px !important;
  background-color: #484848 !important;
  cursor: pointer !important;
  margin-right: 50px;
}

.video-buttons button.selected-button {
  background-color: red !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="display: flex; align-items: center; flex-direction: column;" class="video-buttons" id="canvasButtons">
  <button id="modifyButton">
    <div class="vertical-line"></div>
    <span>Modify B Box</span>
  </button>
</div>

Harshsetia · Accepted Answer · 2021-03-01 09:56:14Z

-1

    
    $(document).ready(function() {
      $('#canvasButtons button').click(function () {
        $('#canvasButtons').children().removeClass('selected-button');
        $(this).addClass('selected-button');
      });
    });

.video-buttons button {
      width: 200px !important;
      height: 66px !important;
      background-color: #484848 !important;
      cursor: pointer !important;
      margin-right: 50px;
      -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    color:#fff;outline:none;border:none;
    }

    .video-buttons button.selected-button {
      background-color: green !important;
      -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="display: flex; align-items: center; flex-direction: column;" class="video-buttons" id="canvasButtons">
      <button id="modifyButton">
        <div class="vertical-line"></div>
        <span>Modify B Box</span>
      </button>
    </div>

please see snippet this will help you. I put also animation speed for changing color. you can manage as per your requirement.

answered Mar 1, 2021 at 9:56

Harshsetia

2652 silver badges6 bronze badges

1 Comment

Dominik Over a year ago

Why create another answer that has less explanation, use the same solution and then adds unneeded things like color transition?

Collectives™ on Stack Overflow

Changing background color of button on click with JQuery doesn't work

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related