1

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;
    }

});

3 Answers 3

4

getColorOptionSelect doesn't have an (uncommented) 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
Sign up to request clarification or add additional context in comments.

Comments

2

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;)

Comments

2

Uncomment 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 
}

});

1 Comment

Each does not support return like that, hence the error. Toexit each it needs to return false.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.