How to get around javascript variable scope

Question

Ok so I have divs on my webpage that when clicked are assigned a variable. I need to access these variables later on when another button is clicked to include them in the email I send. My var mailbody works as it is a local variable I think. But if I replace it with frameColour then it won't work as it isn't global. How can I get around this?

$('#purple').click (function() {
            $(".border").css("fill", "#763d81");
            var frameColour = "purple";
    });

$("#button").click (function() {
    var mailbody = "hello world.";
    window.open('mailto:[email protected]?subject=My Frame&body=' + mailbody);
});

Really? There must be some way that perhaps keeps my functionality but has the variables as global. — dunn_rite
– dunn_rite, Commented Mar 10, 2015 at 8:41
you could declare your frameColour outside the function and just set it on click. — user2952238
– user2952238, Commented Mar 10, 2015 at 8:41
@dunn_rite - if both are inside document.ready (they should be) - $(function(){ /* here */ }); - that is not global scope, just a scope that is a little broader. — Kobi
– Kobi, Commented Mar 10, 2015 at 8:42

Ja͢ck · Accepted Answer · 2015-03-10 08:48:52Z

1

If you need frameColour to be available in other functions, you have to move its scope up; to prevent adding it to the global scope, you can wrap related functions up in another function, i.e.:

jQuery(function($) {
    var frameColour;

    $('#purple').click (function() {
        $(".border").css("fill", "#763d81");
        frameColour = "purple";
    });

    $("#button").click (function() {
        var mailbody = "hello world.";
        // you can use frameColour here
        window.open('mailto:[email protected]?subject=My Frame&body=' + mail body);
    }); 
});

edited Mar 10, 2015 at 8:48

answered Mar 10, 2015 at 8:42

Ja͢ck

174k39 gold badges269 silver badges316 bronze badges

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

2 Comments

dunn_rite Over a year ago

I have them in a document.ready. Would this count if it moved the variables up?

Ja͢ck Over a year ago

@dunn_rite The jQuery(function($) { ... }); construct I'm using there is basically the document ready function, so the same rules could be applied :)

OddDev · Accepted Answer · 2015-03-10 08:42:53Z

0

Just do the declaration before your "click scope".

var frameColour;

$('#purple').click (function() {
            $(".border").css("fill", "#763d81");
             frameColour = "purple";
    });

$("#button").click (function() {
    var mailbody = "hello world.";
    window.open('mailto:[email protected]?subject=My Frame&body=' + mailbody);
});

answered Mar 10, 2015 at 8:42

OddDev

3,7946 gold badges33 silver badges57 bronze badges

Comments

user2952238 · Accepted Answer · 2015-03-10 08:43:59Z

0

try do delacare it outside the function.

var frameColour    
$('#purple').click (function() {
        $(".border").css("fill", "#763d81");
        frameColour = "purple";
});

$("#button").click (function() {
    var mailbody = "hello world.";
    window.open('mailto:[email protected]?subject=MyFrame&body=' + mailbody);
});

answered Mar 10, 2015 at 8:43

user2952238

7872 gold badges14 silver badges37 bronze badges

Comments

Leakim · Accepted Answer · 2015-03-10 08:45:41Z

0

Define the variable i a higher scope, then change the value from inside your function.

var frameColour;
$('#purple').click (function() {
            $(".border").css("fill", "#763d81");
            frameColour = "purple";
});

$("#button").click (function() {
    var mailbody = "hello world.";
    window.open('mailto:[email protected]?subject=My Frame&body=' + mailbody);
});

answered Mar 10, 2015 at 8:45

Leakim

6161 gold badge10 silver badges19 bronze badges

Comments

jasonscript · Accepted Answer · 2015-03-10 08:47:42Z

You can create a global variable by declaring your variable outside your function scopes:

var global_frameColour = "purple";  

$('#purple').click (function() {
   $(".border").css("fill", "#763d81");
   global_frameColour = "purple";
});

$("#button").click (function() {
    var mailbody = "hello world.";

    mailbody += global_frameColour;
    window.open('mailto:[email protected]?subject=My Frame&body=' + mailbody);
});

If you don't want your variable to be global, you can create a auto-executing wrapper. Any variables declared within here (using the var keyword) will be scoped only to the anonymous function. See below

(function (){ // declare an anonymous function

    var scoped_frameColour = "purple";  

    $('#purple').click (function() {
      $(".border").css("fill", "#763d81");
      scoped_frameColour = "purple";
    });

    $("#button").click (function() {
      var mailbody = "hello world.";

      mailbody += scoped_frameColour;
      window.open('mailto:[email protected]?subject=My Frame&body=' + mailbody);
   });

})(); // this line is important as it executes the anon function

console.log(scoped_frameColour); // undefined; out of scope

Collectives™ on Stack Overflow

How to get around javascript variable scope

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related