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, Feb 28 '21 at 20:10
@Undry relevant for your `2)` https://stackoverflow.com/questions/1827965/is-putting-a-div-inside-an-anchor-ever-correct — Dominik, Feb 28 '21 at 20:21

score 2 · Accepted Answer · answered Feb 28 '21 at 20:11

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>

score -1 · Answer 2 · answered Mar 01 '21 at 09:56

    
    $(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.

Why create another answer that has less explanation, use the same solution and then adds unneeded things like color transition? — Dominik, Mar 01 '21 at 21:41

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

2 Answers2