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

Question

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

Why is `$(".check-box-label").on("click", checker);` outside of your doc.ready call? Have you checked the console for errors? — j08691, Nov 15 '19 at 15:57
Scope issue with the method being defined in the ready callback. — Taplar, Nov 15 '19 at 15:59
And side note; this logic would be much cleaner with toggling classes. Though now that I look closer, both the if and the else are applying the same background color hex codes... — Taplar, Nov 15 '19 at 16:00
You're rigth, now that i've had included `$(".check-box-label").on("click", checker);` inside the doc.ready, it is partialy working, but now only the `else` block is working. Like, i click once, and the `background-color` changes, but when i click again, it doesn't change. — Megalypse, Nov 15 '19 at 16:07
@Megalypse that might be partly because both the clauses of your `if` statement set the background to the same colour... — ADyson, Nov 15 '19 at 16:08
@Megalypse ok now that's better. See [this answer](https://stackoverflow.com/a/58880724/5947043) below for why that doesn't work. — ADyson, Nov 15 '19 at 16:10
Related: https://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript — Taplar, Nov 15 '19 at 16:21

stackoverfloweth · Accepted Answer · 2019-11-15T18:39:32.137

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>

For some reason this code doesn't work when clicking on labels, but when clicking on divs, it's completely functional — Megalypse, Nov 15 '19 at 16:47
I was able to make the html above a `` and it still works.. Must be your implementation, maybe click is being caught and stopped? — stackoverfloweth, Nov 15 '19 at 18:40

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

1 Answers1