Using a global variable within a function

Question

Hi all,
I'm trying to learn how to use global variables, but can't quite get it right:
Im trying to use two buttons, named UpButton and DownButton to control one global variable, p1
A text field, named "Value" displays p1.
Here's my code:
p1 = 0;
ButtonClick("UpButton", p1, 100,"Value");
ButtonClick("DownButton", p1,(-100),"Value");
function ButtonClick(ButtonName,Var,Increment,TextToChange){
                    sym.$(ButtonName).click(function(){
                    Var = Var + Increment;
                    sym.$(TextToChange).html(Var);
However, it seems to be treating p1 as two different variables.
Here's a link to the page to show you what I mean, apologies but this link wont work in google chrome because I'm using dropbox as a server temporarily
In other browsers you may need to click "Show all content" or similar to any security warnings...
https://dl.dropboxusercontent.com/u/83693404/ButtonTest/buttons.html
Here are the project files:
https://app.box.com/s/0shocivto8fl295h62uq
Any help greatly appreciated, sorry if this is a stupid question,
Katherine

Answer 1

Hi Katherine,
However, it seems to be treating p1 as two different variables.
Indeed, your code created two different variables in two different scopes (I guess it as to do with JavaScript closures, but do  not ask me more, I am still a bit foggy about that idiosyncrasy ).
In JavaScript, a primitive parameter – this is the case here with p1, a Number value –, is passed by value. In other words, a copy of the value is made. Your code handles two copies of the value stored in p1.
This contrasts with an object parameter, which is passed by reference (address in memory), without copy. Your code would work if Numbers were passed by reference : the two Var (p1) would then point to the same address.
The intent behind your trial is a global variable.
1) Let us be as simple as possible :
Stage : document.compositionReady event handler
p1 = 0;
buttonClick = function( Increment)
  p1 += Increment;
  sym.$( "Value").html( p1);
Stage : DownButton.click event handler
buttonClick(-100);
Stage : UpButton.click event handler
buttonClick(100);
Without being preceded by the var keyword the variables are global.
So the Number variable p1 can be accessed inside function buttonClick.
And the Function variable buttonClick as well, is accessible inside click event handlers, everything (function definition +function calls) being inside the same symbol (Stage).
2) Now, suppose this is no longer the case : you want to access a variable from another symbol.
We create a new GraySquare symbol, instantiated both in the DownButton symbol (instance name DownSquare) and in the UpButton symbol (instance name DownSquare).
Stage : document.compositionReady event handler
p1 = 0;
sym.buttonClick = function( Increment)
  p1 += Increment;
  sym.$( "Value").html( p1);
The sym. prefix is now necessary to make the variable (here a Function, but you would proceed exactly the same with a String, Number or Boolean) accessible in other symbols.
DownButton symbol : DownSquare.click event handler
sym.getComposition().getStage().buttonClick( -100);
UpButton symbol : UpSquare.click event handler
sym.getComposition().getStage().buttonClick( 100);
From these other symbols, the sym.getComposition().getStage(). prefix is necessary to acces to our global variable (function).
The two examples are downloadable here : https://app.box.com/s/6vkyiqk7i8zwlw0j1wk1
Gil