Why getColorOptionSelect() return undefined value (I'm sure it has a value by debugger ).

It is for sure an issue related to the scope, sorry for my js ignorance

jQuery(document).ready(function () {

    colorSelectID = getColorOptionSelect();
    alert(colorSelectID);

    function getColorOptionSelect() {

        // get label
        var selId;
        jQuery(".product-options dl label").each(function () {
            el = jQuery(this);
            // lower case, remove *
            var labelText = el.text().toLowerCase().replace("*", "");
            if (labelText == 'color') {
                //return element
                selId = el.parent().next().find("select").attr('id');
                return selId;
            }
        });
        //    return null;
    }

});

Why getColorOptionSelect() return undefined value (I'm sure it has a value by debugger ).

It is for sure an issue related to the scope, sorry for my js ignorance

jQuery(document).ready(function () {

    colorSelectID = getColorOptionSelect();
    alert(colorSelectID);

    function getColorOptionSelect() {

        // get label
        var selId;
        jQuery(".product-options dl label").each(function () {
            el = jQuery(this);
            // lower case, remove *
            var labelText = el.text().toLowerCase().replace("*", "");
            if (labelText == 'color') {
                //return element
                selId = el.parent().next().find("select").attr('id');
                return selId;
            }
        });
        //    return null;
    }

});

• javascript
• jquery

Share Improve this question Follow edited Jan 21, 2013 at 15:02 WonderLand asked Jan 21, 2013 at 14:55 WonderLandWonderLand 5,67477 gold badges5858 silver badges7777 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

getColorOptionSelect doesn't have an (unmented) return statement.

The only return statement you have is inside the anonymous function you pass to each(). It will be consumed by the code underlying each() (which will stop looping if it is false).

This isn't a problem of scope, just of there being multiple functions.

You probably want to:

• define a variable before you call each()
• assign a value to it inside the each loop
• return that variable at the end of getColorOptionSelect

You should do:

function getColorOptionSelect() {

        // get label
        var selId;
        jQuery(".product-options dl label").each(function () {
            el = jQuery(this);
            // lower case, remove *
            var labelText = el.text().toLowerCase().replace("*", "");
            if (labelText == 'color') {
                //return element
                selId = el.parent().next().find("select").attr('id');
                return false; // to stop further execution of each
            }
        });
        return selId;
    }

In your case you are doing return from callback function passed to each and it will not be passed from getColorOptionSelect

The only thing you can do returning a value from each function callback is to tell jquery if it should go to next item (return true;) or not (return false;)

Unment the last return statement to retun a value (something like selId)

jQuery(document).ready(function () {

colorSelectID = getColorOptionSelect();
alert(colorSelectID);

function getColorOptionSelect() {

    // get label
    var selId;
    jQuery(".product-options dl label").each(function () {
        el = jQuery(this);
        // lower case, remove *
        var labelText = el.text().toLowerCase().replace("*", "");
        if (labelText == 'color') {
            //return element
            selId = el.parent().next().find("select").attr('id');
            return false;  //<---  return false to stop further propagation of each
        }
    });
      return selId; //<---  Must return something 
}

});