Q:

I can't change a class background-color on click with this code.  Why? 

$(document).ready(function(){
    function checker() {
       if ($(".check-box-label").css("background-color") === "none"){
           $(".check-box-label").css("background-color", "#1F7566")
       }else{
           $(".check-box-label").css("background-color", "none")
       }
    };
});

$(".check-box-label").on("click", checker);

With this code, the .check-box-label background-color were suposed to alternate colors on click depending on the actual background-color value, why isn't it working?  Thanks

A:

couple of issues,
1.)  .css("backgroundColor") returns rgb, not hex, so I added a common method used to convert to hex
2.)  setting background-color to none, will not work.  You need to use either "transparent" or "initial" instead

function rgb2hex(rgb) {
     if (  rgb.search("rgb") == -1 ) {
          return rgb;
     } else {
          rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/);
          function hex(x) {
               return ("0" + parseInt(x).toString(16)).slice(-2);
          }
          return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); 
     }
}

function checker() {
   var targetColor = "#1f7566";
   var color = $(".check-box-label").css("backgroundColor");
   console.log(rgb2hex(color), rgb2hex(color) ! = targetColor)
   if (rgb2hex(color) ! = targetColor){
       $(".check-box-label").css("background-color", targetColor)
   }else{
       $(".check-box-label").css("background-color", "initial")
   }
};

$(".check-box-label").on("click", checker);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="check-box-label">
things
</label>

