JavaScript: Global variables don't seem to be locally referencible

Question

I'm having some problems with a function recognizing that some variables have been previously defined; they are supposed to be global, but they don't seem to be acting like it.

var global = "Summat.";
function Function() {
    alert(global);    //alerts "undefined"
    //some more code referencing similar variables
    alert("Hey.");    //doesn't display.
    }

I'm not sure that the problem is actually what-I-believe-to-be-global variables aren't behaving like global variables, but that's what I've narrowed it down to with my limited troubleshooting abilities. I'd also be more than happy to post and try to explain the full/more code if that would help.

This is the more expanded version:

<!DOCTYPE html>
<html>

<head>
    <title>divMan: Canvas</title>
</head>

<body>
    <canvas id="canvas" height="768px" width="1366px" style="position:fixed;top:0px;left:0px;"></canvas>
</body>

<script>
    window.onload = drawFrame();

//----------------------------------------Global Variables-----------------------------//
    var context = document.getElementById("canvas").getContext("2d");
//------------------------------------------------------------------------------------//

//-----------------------------------------------------------------------Constructors-----------------------------------------------------------------------------------------------//
    function Point(top,left) {this.top = top; this.left = left;}
    function Stone(top,left,height,width) {//a seemingly functional constructor}
    function Tree(top,left,trunkHeight,trunkWidth,crownHeight,crownWidth) {//a seemingly functional constructor}
    function DivMan(top,left,headHeight,headWidth,bodyHeight,bodyWidth) {//a seemingly functional constructor}
    function Sky(top,left,height,width) {//a seemingly functional constructor}
    function Ground() {//a seemingly functional constructor}
    function Grass(height,targetGround) {//a seemingly functional constructor}
//--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------//

//----------------------------------------------Objects------------------------------------------------//
    var sky = new Sky(0,0,538,1366);            //the sky.
    var ground = new Ground();              //the ground.
    var grass = new Grass(38,ground);           //the grass.
    var stone = new Stone(418,228,75,75);       //a stone.
    var pedestal = new Stone(508,630,30,200);       //a stone pedestal.
    var tree0 = new Tree(138,1000,150,60,250,300);  //a tree.
    var tree1 = new Tree(83,73,300,40,100,300); //another tree.
    var divMan = new DivMan(408,700,34,30,65,60);   //divMan!!
//----------------------------------------------------------------------------------------------------//

    function drawFrame() {
            sky.Draw();
            ground.Draw();
        grass.Draw();
        tree1.Draw();
        stone.Draw();
        pedestal.Draw();
        divMan.Draw();
        tree0.Draw();
        }

This is what the full thing looks like right now:

<!DOCTYPE html>
<html>

<head>
    <title>divMan: Canvas</title>
</head>

<style>
    * {-ms-touch-action:none;}
</style>

<body>
    <canvas id="canvas" height="768px" width="1366px" style="position:fixed;top:0px;left:0px;"></canvas>
</body>

<script>
    window.onload = drawFrame();
    //window.onclick = walk(event);

//----------------------------------------Global Variables-----------------------------//
    var context = document.getElementById("canvas").getContext("2d");
    //var _walk = false;
    /*var staticEquilibrium = true;
    //--Kinematic Variables--//
        var vSubX = 0;
        var aSubX = 0;
        var jSubX = 0;
        var vSubY = 0;
        var aSubY = 0;
        var jSubY = 0;*/
//  var deltaT = .001;      //standard time interval.
//  var interval;           //a timing loop variable.
//------------------------------------------------------------------------------------//

//-----------------------------------------------------------------------Constructors-----------------------------------------------------------------------------------------------//
    function Point(top,left) {this.top = top; this.left = left;}    //Parameters are numbers, to be used for pixel values.
    function Stone(top,left,height,width) {     //stones.
        this.origin = new Point(top,left);      //make sure to give this a curved top, eventually.
        this.height = height;
        this.width = width;
        this.color = "#a0a0a0";
        this.Draw = drawStone;
            function drawStone() {
                context.fillStyle = this.color;
                context.fillRect(this.origin.left,this.origin.top,this.width,this.height);
                }
        }
    function Tree(top,left,trunkHeight,trunkWidth,crownHeight,crownWidth) {     //trees.
        this.origin = new Point(top,left);
        this.trunkHeight = trunkHeight;
        this.trunkWidth = trunkWidth;
        this.trunkColor = "#702000";
        this.crownHeight = crownHeight;
        this.crownWidth = crownWidth;
        this.crownColor = "#40d030";
        this.Draw = drawTree;
            function drawTree() {
                context.fillStyle = this.crownColor;
                context.fillRect(this.origin.left,this.origin.top,this.crownWidth,this.crownHeight);
                context.fillStyle = this.trunkColor;
                context.fillRect(this.origin.left+(this.crownWidth-this.trunkWidth)/2,this.origin.top+this.crownHeight,this.trunkWidth,this.trunkHeight);
                }
        }
    function DivMan(top,left,headHeight,headWidth,bodyHeight,bodyWidth) {       //divMEN.
        this.origin = new Point(top,left);
        this.headHeight = headHeight;
        this.headWidth = headWidth;
        this.bodyHeight = bodyHeight;
        this.bodyWidth = bodyWidth;
        this.color = "#000000";
        this.Draw = drawDivMan;
            function drawDivMan() {
                context.fillStyle = this.color;
                context.fillRect(this.origin.left+(this.bodyWidth-this.headWidth)/2,this.origin.top,this.headWidth,this.headHeight);
                context.fillRect(this.origin.left,this.origin.top+this.headHeight+1,this.bodyWidth,this.bodyHeight);
                }
        }
    function Sky(top,left,height,width) {               //skies.
        this.origin = new Point(top,left);
        this.height = height;
        this.width = width;
        this.color = "#98e8ff";
        this.Draw = drawSky;
            function drawSky() {
                alert("Yorishomu.");
                context.fillStyle = this.color;
                context.fillRect(this.origin.left,this.origin.top,this.width,this.height);
                }
        }
    function Ground() {             //the ground.
        this.origin = new Point(538,0);
        this.hillStart = new Point(538,1);
        this.hillTop1 = new Point(488,114);
        this.hillTop2 = new Point(488,429);
        this.hillEnd = new Point(538,543);
        this.screenEnd = new Point(538,1366);
        this.bottomRight = new Point(768,1366);
        this.bottomLeft = new Point(768,0);
        this.color = "#401000";
        this.Draw = drawGround;
            function drawGround() {
                context.fillStyle = this.color;
                context.beginPath();
                context.moveTo(this.origin.left,this.origin.top);
                context.lineTo(this.hillStart.left,this.hillStart.top);
                context.lineTo(this.hillTop1.left,this.hillTop1.top);
                context.lineTo(this.hillTop2.left,this.hillTop2.top);
                context.lineTo(this.hillEnd.left,this.hillEnd.top);
                context.lineTo(this.screenEnd.left,this.screenEnd.top);
                context.lineTo(this.bottomRight.left,this.bottomRight.top);
                context.lineTo(this.bottomLeft.left,this.bottomLeft.top);
                context.closePath();
                context.fill();
                }
        }
    function Grass(height,targetGround) {           //the grass.
        this.color = "#10b030"
        this.height = height;
        this.targetGround = targetGround;
        this.Draw = drawGrass;
            function drawGrass() {
                context.strokeStyle = this.color;
                context.lineWidth = this.height;
                context.beginPath();
                context.moveTo(this.targetGround.origin.left,this.targetGround.origin.top);     //it follows the ground.
                context.lineTo(this.targetGround.hillStart.left,this.targetGround.hillStart.top);
                context.lineTo(this.targetGround.hillTop1.left,this.targetGround.hillTop1.top);
                context.lineTo(this.targetGround.hillTop2.left,this.targetGround.hillTop2.top);
                context.lineTo(this.targetGround.hillEnd.left,this.targetGround.hillEnd.top);
                context.lineTo(this.targetGround.screenEnd.left,this.targetGround.screenEnd.top);
                context.stroke();
                }
        }
//--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------//

//----------------------------------------------Objects------------------------------------------------//
    var sky = new Sky(0,0,538,1366);            //the sky.
    var ground = new Ground();              //the ground.
    var grass = new Grass(38,ground);           //the grass.
    var stone = new Stone(418,228,75,75);       //a stone.
    var pedestal = new Stone(508,630,30,200);       //a stone pedestal.
    var tree0 = new Tree(138,1000,150,60,250,300);  //a tree.
    var tree1 = new Tree(83,73,300,40,100,300); //another tree.
    var divMan = new DivMan(408,700,34,30,65,60);   //divMan!!
//----------------------------------------------------------------------------------------------------//

    function drawFrame() {
        context.fillStyle = "#000000";
        context.fillRect(0,0,100,100);
        alert("Yo." + sky + context);
        sky.Draw();
        alert("Hi.");
        ground.Draw();
        grass.Draw();
        tree1.Draw();
        stone.Draw();
        pedestal.Draw();
        divMan.Draw();  // <-- Here's divMan.
        tree0.Draw();
        alert("Hey.");
        }

    /*function walk(click) {        //in future, walk in mini-hops.
        _walk = true;
        staticEquilibrium = false;
        if (click.screenX > rSubX+30) {vSubX = 5;} else {vSubX = -5;}
        update();
        }

    function update() {
        interval = setInterval(function() {
            for (i=0; i<1; i++) {
                divMan.origin.left += vSubX*deltaT+aSubX*deltaT*deltaT/2;
                divMan.origin.top += vSubY*deltaT+aSubY*deltaT*deltaT/2;
                }
            drawFrame();
            if (false) {clearInterval(interval);}
            }
        }*/
</script>

</html>

Why are you defining the variable name as "global"? Also, why are you defining the function name as "Function"? — Ben Harold, Jun 24 '13 at 01:38
,and Function is just defined randomly somewhere in the script tag. — Jordan, Jun 24 '13 at 01:59
@Ben Harold: No good reason. Just to aid comprehension of the example. — Jordan, Jun 24 '13 at 02:00
@Dave Chen and alfasin: I haven't actually tried this specific piece of code; if you would like the original, you may be able to pinpoint the actual error in it. I'll try and figure out how to post it here currently.... — Jordan, Jun 24 '13 at 02:05
If the original is large, please post it on JSFiddle and link it here. The code should include where this functions breaks. — Dave Chen, Jun 24 '13 at 02:10
@Dave Chen: Will do. I have it here now, but I'll try and get it on JSFiddle soon as possible (and try to label it). — Jordan, Jun 24 '13 at 02:31
@bfavaretto: What does "Function !== function" mean? And I've heard of this console thing, but have never used it and am not sure how to do so.... I'll look it up; but I'm sleeping soon and may not get back to y'all for a while. In the mean time, thank you all very much for the current advise. — Jordan, Jun 24 '13 at 02:40
Before I saw your actual code, I though you were trying to override the `Function` function, which is a dangerous thing. But that's not the case, I found that out when you post the real code. See my answer, I believe I've found the problem. About the console, it's a very useful tool, available in all modern browsers. It usually opens with F12 under window. If you can't open, check your browser's menu. The console will show any syntax errors on your code, and will help you catch basic problems. You can also use `console.log` instead of alert for debugging. Plus a million other useful tools. — bfavaretto, Jun 24 '13 at 02:52
I think that should be it. Let me know if you need anything else. — Jordan, Jun 24 '13 at 03:00

bfavaretto · Accepted Answer · 2013-06-24T02:53:48.013

You think your code is running on page load, but it's not. Replace this:

window.onload = drawFrame();
// -------------- remove ^^
// the parentheses call function immediately
// and assign its return value to window.onload

with:

window.onload = drawFrame;
// now you're actually assigning the function
// itself to window.onload, as it should be

Then the context will be available, and everything will work.

http://jsbin.com/irezag/1/edit

JavaScript: Global variables don't seem to be locally referencible

1 Answers1

Linked