JQuery - Script working in everything except IE10

Question

The script makes use of a bunch of cool functions, but it just does nothing on IE10.

I don't know which one part of it disagrees with, is there a Javascript debugger available for IE10 or can someone see what I'm 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 a really trimmed down version of 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 perils of programming using Chrome as your default browser...

The javascript debugger in IE10 is the same one thats in other versions of IE. It's in the Developer Tools (press F12). Look under the Script Tab. — Paul Welbourne, May 14 '13 at 08:39
Check out this link for full details: http://msdn.microsoft.com/en-us/library/ie/gg699336(v=vs.85).aspx — Paul Welbourne, May 14 '13 at 08:41

score 2 · Answer 1 · answered May 14 '13 at 09:14

I figured out why this script wasn't working in IE10! :D

There are two reasons:

When you call this code:

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

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

Then subsequent calls to the script return an rgb value (rgb(139,231,156)) (note the lack of whitespace) Weird right?

When I originally wrote the script, I used alert() to find out what colour was returned by .css(), which gave me rgb(139, 231, 156) (from Chrome, with whitespace!) so that's what the script was looking out for.

Replacing:

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 it now works all the time in both Chrome and IE 10.

Hopefully this helps anyone else who happens to come across this rather unusual problem.

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

It might be easier to use a class name to signal whatever condition you're looking to determine, rather than looking at colors which seems a bit hacky. If you really do need to check and/or manipulate colors on elements across browsers, take a look at the [jQuery Color plugin](https://github.com/jquery/jquery-color#readme). — Dave Methvin, May 14 '13 at 20:40

JQuery - Script working in everything except IE10

1 Answers1