JQuery - Script works in everything except IE10

Question

I have a fiddle here for this problem.

The script uses a bunch of cool features, but it just does nothing on IE10.

I don’t know which one he disagrees with, is there a Javascript debugger for IE10, or can someone see what I am doing wrong?

$(function (){ $('.roleCheck').click(function () { var check = $(this).attr('id'); var id = check.substr(check.length - 1).toString(); var field = "#fieldSet" + id; var oldCol = $(this).css("background-color"); if (oldCol == "rgb(139, 231, 156)") { $(this).css("background-color", "#fc8b6a"); $(field).hide(); $(this).find('span').text("Show"); } else { $(this).css("background-color", "#8be79c"); $(field).show(); $(this).find('span').text("Hide"); } }); }); 

Here is the really stripped-down version where it is used:

 <div id="columns"> <div class="columns left"> <fieldset> <legend>Filters and Controls</legend> <div class="roleCheck" id="check0"> <span>Hide</span> Engineer </div> <br /> <div class="roleCheck" id="check1"> <span>Hide</span> Trainee Engineer </div> <br /> <div class="roleCheck" id="check2"> <span>Hide</span> Senior Engineer </div> </fieldset> </div> <div class="columns right"> <fieldset id="fieldSet0"> <legend>Engineer</legend> <table> <thead> <tr> <th>Header 1</th> <th>Header 2</th> </tr> </thead> <tbody> <tr> <td>Info 1</td> <td>Info 2</td> </tr> </tbody> </table> </fieldset> <fieldset id="fieldSet1"> <legend>Trainee Engineer</legend> <table> <thead> <tr> <th>Header 1</th> <th>Header 2</th> </tr> </thead> <tbody> <tr> <td>Info 1</td> <td>Info 2</td> </tr> </tbody> </table> </fieldset> <fieldset id="fieldSet2"> <legend>Senior Engineer</legend> <table> <thead> <tr> <th>Header 1</th> <th>Header 2</th> </tr> </thead> <tbody> <tr> <td>Info 1</td> <td>Info 2</td> </tr> </tbody> </table> </fieldset> </div> </div> 

Ah, the concerns of programming using Chrome as your default browser ...

Answer 1

I understood why this script did not work in IE10 !: D

There are two reasons:

When you call this code:

 var oldCol = $(this).css("background-color"); 

IE first returns a hexadecimal value (in this case #8be79c )

Then subsequent calls to the script return the value rgb ( rgb(139,231,156) ) (note the absence of spaces). Is it right?

When I originally wrote the script, I used alert() to find out what color was returned by .css() , which rgb(139, 231, 156) gave me (from Chrome with a space!) So that the script would look.

Replacement:

 var oldCol = $(this).css("background-color"); if (oldCol == "rgb(139, 231, 156)") { 

WITH

 var oldCol = $(this).css("background-color").replace(/ /g,''); if (oldCol == "rgb(139,231,156)" || oldCol == "#8be79c") { 

means that it now works all the time in both Chrome and IE 10.

Hope this helps anyone facing this rather unusual issue.

Thanks for the helpful comments about debugging, it helped me sort out the problem!