1

I have this code

function getSelectData(id) {
    jQuery(id).change(function () {
        var value='';
        jQuery(id+" option:selected").each(function () {
            value =jQuery(this).val() ; 
        });
        console.log(value);
    });
    return value;
}

var d = getSelectData("#sort_post_date");
console.log(d);

How i can access variable "value" , i tried different methods , but nothing , where is console.log(value); , value exit , but outside nothing , Thank You for Helping !

Improve this question

4 Answers 4

Reset to default
9

You need ot move value outside of the function so it is bound to the closure. Like this:

function getSelectData(id) {
    var value='';

    // set value to be the current selected value
    value = jQuery(id+" option:selected").val();

    // change value whenever the box changes
    jQuery(id).change(function () {
        value = jQuery(id+" option:selected").val();
        console.log("I see a change! -> "+value);
    });

    console.log(value);
    return value;
}

var d = getSelectData("#sort_post_date");
console.log(d);

Here is the fiddle to show it works : http://jsfiddle.net/ZvuMh/

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

7 Comments

Thank You For Helping !! I really appreciate it ! i try this method but still is empty , i can get just see value where is "console.log(value);" , outside function change is not working :( , outside is empty
so the console.log(value); shows the correct value but the console.log(d); does not?
console.log(value); shows the correct value , but console.log(d); is empty
This makes sense, you are only setting value when you change the selection (the code is bound to the change event handler.) When you call the getSelectData(..) you reset value to blank. So when you change it you see the console.log() from the event handler, but you don't see that when you call getSelectData -- they are run at different times.
Right now is showing jut first value from list both console.log(value); and console.log(d);, just console.log("I see a change! -> "+value); is showing result , maybe exist a method how to get variable from change function , because just from this function variable i can not see it , Thank you Hogan for your help , and for your time ;)
|
1

This is a classic closure question. Here are some of the most similar ones

Event handlers inside a Javascript loop - need a closure?

javascript timer or intervals created in loop using closure

Javascript closure inside loops - simple practical example

Bottom line, the value variable is not local to the event handlers you're creating. So all of the handlers you create are going to have the value that value had when the outer function ended. In this case, it is still blank.

Improve this answer

1 Comment

there must be a million of em.
0

You cannot access your value variable outside of the function it was declared in. This is called the variable scope. Read up on variable scope here

If you want to be able to access a variable, you need to be in a scope that is at least as general as the one it was declared in.

So in this case :

function getSelectData(id){
    var value='';        
    jQuery(id).change(function () {
        jQuery(id+" option:selected").each(function () {
            value =jQuery(this).val() ; 
        });

        console.log(value);
    });
    return value;
}

var d=getSelectData("#sort_post_date");
console.log(d);
Improve this answer

3 Comments

Isn't using a closure better?
I agree--learning to use closures here will change the way you write JavaScript forever.
@Hogan : Definitely, hadn't read my code properly. Although you still need to learn about variable scope before you can understand closure.
0

Try definining the value variable in the global scope:

var value='';

function getSelectData(id) {
    jQuery(id).change(function () {
        value='';
        jQuery(id+" option:selected").each(function () {
            value =jQuery(this).val() ; 
        });
    console.log(value);
    });
    return value;
}

There's also no point in returning 'value' here, since it's being set in an event handler...there won't be anything in there (or, just an old value) at the point of return.

Improve this answer

4 Comments

There is a point. Using a closure you can reduce the "chaff" in the global scope. See my code example.
I don't see how this is a closure. You're not returning a function, you're just returning a var containing a string. If you want each change handler to keep track of its own previous value, why not just define it within the handler function, and call some callback method from there? Well, I guess the handler itself closes around the value var, so that if there are tons of handlers, there is only one val tracked at a time? Is that the goal of this? Returning value from getSelectData still doesn't seem useful.
It is a closure because function () { value=''; jQuery(id+" option:selected").each(function () { value =jQuery(this).val() ; } includes a reference to the variable value. value is included in the closure for the function.
That makes sense, but I still don't get the point of returning 'value' from getSelecetData(id). Since this is a primitive type and not an object, isn't a copy of the contents of value being returned? In this case, then, it would more than likely be an empty string, and wouldn't be modifed by the event handler closure, right?

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.