jQuery [object Object] Issue

Question

I am wanting to update a css attribute using jQuery but it isnt working. Using the alerts in the code below my first alert brings up

url("file:///H:/Web/example/HTML/images/red-arrow-up.png")

but then the second alert (in the if statement) brings up

[object Object]

But what i want it to do is update the attribute and change up to down in the url. Any idea what im doing wrong?

    $(document).ready(function() {
        $( ".portlet-header" ).click(function() {
            var currValue = $(this).children(".portlet-arrow").css("background-image");
            alert (currValue)
            if ($("currValue:contains('up')"))  {
                var newValue = $(currValue.replace("up", "down"));
                alert(newValue)
                $(this).children(".portlet-arrow").css("background-image", newValue)    
            };
            if ($("currValue:contains('down')"))    {
                var newValue = $(currValue.replace("down", "up"));
                alert(newValue)
                $(this).children(".portlet-arrow").css("background-image", newValue)    
            };
        });
    });

related: [Javascript - \[object Object\] means?](http://stackoverflow.com/q/8892465/1048572) — Bergi, Nov 04 '14 at 16:13

score 3 · Accepted Answer · edited May 23 '17 at 10:28

This basically all comes down to going over-the-top on jQuery selector syntax without having read the documentation to find out what selectors actually do.

Why did you surround currValue.replace("down", "up") in $()? That looks like an attempt to create a jQuery object out of a string that contains the URL to an image. Don't do that. Arbitrary Javascript code isn't to be surrounded in $() for no reason.
Also, $("currValue:contains('down')") doesn't do what you think. That syntax is for selecting DOM nodes based on certain criteria, not for implementing arbitrary conditional statements on strings. You just want to search within a string.

$(document).ready(function() {
    $(".portlet-header").click(function() {
        var currValue = $(this).children(".portlet-arrow").css("background-image");
        alert(currValue);
        if (currValue.indexOf('up') != -1) {
            var newValue = currValue.replace("up", "down");
            alert(newValue);
            $(this).children(".portlet-arrow").css("background-image", newValue);
        }
        if (currValue.indexOf('down') != -1) {
            var newValue = currValue.replace("down", "up");
            alert(newValue);
            $(this).children(".portlet-arrow").css("background-image", newValue);
        }
    });
});

The code can be improved further:

$(function() {
    $(".portlet-header").click(function() {

        var currValue = $(this).children(".portlet-arrow").css("background-image");
        alert(currValue);

        if (currValue.indexOf('up') != -1) {
            var newValue = currValue.replace("up", "down");
        }
        else if (currValue.indexOf('down') != -1) {
            var newValue = currValue.replace("down", "up");
        }
        else {
            return;
        }

        alert(newValue);
        $(this).children(".portlet-arrow").css("background-image", newValue);
    });
});

Thats exactly what i was looking for. I am currently learning javascript/jQuery, but the syntax is confusing. — Undefined, Jan 20 '12 at 13:48
@SamWarren: I suggest learning Javascript on its own first, then adding usage of the jQuery library when you're comfortable. — Lightness Races in Orbit, Jan 20 '12 at 13:51
@SamWarren try not learning jQuery and focusing on JavaScript / DOM. — Raynos, Jan 20 '12 at 13:54

score 0 · Answer 2 · answered Jan 20 '12 at 13:48

Alert shows you [object Object] because you are creating jQuery object from string by:

$(currValue.replace("up", "down"));

You should use currValue.replace("up", "down"); without $().

Also

if ($("currValue:contains('up')")) {

is incorrect. This allways return true because you creating empty jQuery object from string you passed to $().

You should use:

currValue.indexOf('up') !== -1

or

/up/.test(currValue)

to test if string contains some substring.

jQuery [object Object] Issue

2 Answers2