jQuery if/else statements not working

Question

Very new to jQuery, and I can't figure out why this little snippet of code isn't working. I set the background of the body to black, but I always return with the else statement, and my background turns orange instead of the desired pink.

$(document).ready(function(){
    $("body").css("background","black");
        if ($("body").css("background") == "black") {
            $("body").css("background", "pink");
        }
        else {
            $("body").css("background", "orange");
        }
});

You can see what's happening here: http://jsfiddle.net/jH6Y9/1/

Simple to see why it fails: `console.log($("body").css("background"));` — epascarello, Jul 23 '14 at 23:59
Colors are generally returned in `rgb` format, not `hex`. This might be helpful: [Can I Force jQuery CSS Background Color Returns On Hexadecimal Format](http://stackoverflow.com/questions/6177454/can-i-force-jquery-cssbackgroundcolor-returns-on-hexadecimal-format) — showdev, Jul 24 '14 at 00:00

Pointy · Answer 1 · 2014-07-24T00:08:05.047

You can't just ask for a composite CSS style like "background"; the value comes back as the empty string. Ask for "background-color". (edit — Firefox gives me the empty string; other browsers might construct the whole composite set of background properties for you.)

Now, once you get past that problem, you'll discover that the reported color won't be "black". It'll be some other color syntax that means "black".

Instead of relying on the style mechanism to keep track of what's going on, use a class instead:

$("body").addClass("black");
if ($("body").hasClass("black"))
  $("body").addClass("pink");
else
  $("body").addClass("orange");

Then in your CSS:

body.black { background-color: black; }
body.pink { background-color: pink; }
body.orange { background-color: orange; }

Better yet, use some semantically meaningful name for the state of the page instead of the color names, so that if you later change your mind and want to have the background switch from a dog to a kitten the code will still make sense.

When juggling class names, you would probably need to make sure to remove one color when setting the other. — Pointy, Jul 24 '14 at 00:04

score 1 · Answer 2 · answered Jul 24 '14 at 00:02

1

css 'background' gives you the full background param, it would look something like:

"rgb(0,0,0) none repeat scroll..."

If you just want to check the color, you need to specify that you want the color attribute, and also test it against the value that it actually uses, instead of "black" you actually want to test the rgb color value:

if ($('body').css("background-color") == "rgb(0, 0, 0)")

answered Jul 24 '14 at 00:02

Lochemage

3,974
11
11

When I log the result if asking for the "background" property, I just get an empty string (from Firefox). – Pointy Jul 24 '14 at 00:05

score 0 · Answer 3 · answered Jul 24 '14 at 00:00

0

The fix is simple. $("body").css("background-color", "black") !== "black". Instead, it equals rgb(0, 0, 0). In CSS, "black" is not a real color. Instead, it gets converted to an rgb() color. To fix it:

$(document).ready(function(){
    $("body").css("background-color","black");
    console.log($("body").css("background-color"))
    if ($("body").css("background-color") == "rgb(0, 0, 0)") {
        $("body").css("background-color", "pink");
    }
    else {
        $("body").css("background-color", "orange");
    }
});

fiddle

answered Jul 24 '14 at 00:00

royhowie

11,075
14
50
67

1

I'm not sure every browser will report the color exactly the same way however. – Pointy Jul 24 '14 at 00:01
@Pointy I just tested it in Safari, Chrome, and FireFox; it returned an `rgb()` value every time. Not sure about Internet Explorer. – royhowie Jul 24 '14 at 00:03

jQuery if/else statements not working

3 Answers3

fiddle