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
– epascarello, Commented Jul 23, 2014 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 — showdev
– showdev, Commented Jul 24, 2014 at 0:00

Pointy · Accepted Answer · 2014-07-24 00:08:05Z

2

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.

edited Jul 24, 2014 at 0:08

answered Jul 24, 2014 at 0:00

Pointy

415k62 gold badges600 silver badges631 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pointy Over a year ago

When juggling class names, you would probably need to make sure to remove one color when setting the other.

Pointy Over a year ago

@CodeMaverick yes that's a great suggestion.

Lochemage · Accepted Answer · 2014-07-24 00:02:03Z

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, 2014 at 0:02

Lochemage

3,97413 silver badges11 bronze badges

1 Comment

Pointy Over a year ago

When I log the result if asking for the "background" property, I just get an empty string (from Firefox).

royhowie · Accepted Answer · 2014-07-24 00:00:51Z

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, 2014 at 0:00

royhowie

11.2k14 gold badges54 silver badges67 bronze badges

2 Comments

Pointy Over a year ago

I'm not sure every browser will report the color exactly the same way however.

royhowie Over a year ago

@Pointy I just tested it in Safari, Chrome, and FireFox; it returned an rgb() value every time. Not sure about Internet Explorer.

Collectives™ on Stack Overflow

jQuery if/else statements not working

3 Answers 3

2 Comments

1 Comment

fiddle

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related