Passing variables in nested functions between scripts

Question

I am a newbie to jQuery and am trying to make a variable within a nested function available between scripts. However, I am unsure of how to do so (I am pretty bad at understanding scope). Here is the code (note: I copy-pasted this from jsFiddle, hence some tags are purposefully missing).

<body>
    <h1>Hello</h1>    
    <button id="btn">click</button>
 <script>
    var x;
    $(document).ready(function() {
        $(document).on("click", "#btn", function() {
           x = "hello world";
        });
    });
</script>
<script>
    alert(x);
</script>    
</body>

Any help is appreciated!

It will alert undefined as the alert() will get executed before the click event happens — Arun P Johny
– Arun P Johny, Commented Sep 5, 2013 at 15:54
This isn't scope-related, it's time-related. The alert will execute when its encountered, the click handler will set x only after the click event. — Dave Newton
– Dave Newton, Commented Sep 5, 2013 at 15:59
I think there needs to be some clarification. If you want the alert to happen on #btn's click event, why didn't you put the alert there? If you don't want the alert to happen then, when do you want it to happen? — Smern
– Smern, Commented Sep 5, 2013 at 16:02
To clarify, I basically need x to be accessible by other scripts. So once the button is clicked, and x is set, I need to be able to use x in other pages etc. The alert in the code is just for example. But I need to manipulate the value set by the button click event in a different page. — i_trope
– i_trope, Commented Sep 5, 2013 at 16:10

Satpal · Accepted Answer · 2013-09-05 15:57:21Z

1

You are doing correctly, in your code <script> alert(x);</script> when you are using alert x value is not set.

HTML:

<button id="set">set</button>
<button id="get">get</button>

JS:

var x;
$(document).ready(function () {
    $(document).on("click", "#set", function () {
        x = "hello world";
    });

    $(document).on("click", "#get", function () {
        alert(x);
    });
});

JSFiddle Demo

answered Sep 5, 2013 at 15:57

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

Comments

bipen · Accepted Answer · 2013-09-05 16:00:32Z

1

for that alert to alert Hello World you need to add it inside the click function... since x is redeclare inside the click event . and you don't have to seperate your <script>.

<script>
var x;
$(document).ready(function() {
    $(document).on("click", "#btn", function() {
       x = "hello world";
       alert(x); //alerts hello world
    });
    alert(x); //alerts undefined since x is not set as this is executed before the click event as soon as document is ready
});
alert(x); //alerts undefined since x is not set


</script>

edited Sep 5, 2013 at 16:00

answered Sep 5, 2013 at 15:54

bipen

36.6k9 gold badges51 silver badges62 bronze badges

1 Comment

bipen Over a year ago

yup!!! thanks update... i guess. its time for me to go for a coffee :)...thanks @smerny

Collectives™ on Stack Overflow

Passing variables in nested functions between scripts

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related