JavaScript - How can you pass global variables between .js files?

Question

I'm pretty new to JavaScript, and programming in general. I think I'm going about this the wrong way but I'll try to explain what I'm trying to do and how I'm doing it. It's not working.

I made a page with five boxes that you can click. When you click one, it will run a function stored in one js file and look through cases to find the one that matches, then change the text in the text box as well as the choices in the five boxes below. I think I'm having trouble with global variables not carrying over from one included .js file to another.

I can't think of another way of doing this. I can't just return a single variable since I need to change around 5 separate variables for each case statement for each choice. Is there a better way of carrying this information back and forth than these $choice variables that don't seem to work?

file 1.js

var $choice1 = "0";
var $choice2 = "0";
var $choice3 = "0";
var $choice4 = "0";
var $choice5 = "0";

//Main Body - start doing stuff once the page has loaded    
$( document ).ready(function() {    

//Run once
NewArea("newgame");

$("#choice1").click(function() {
    NewArea($choice1);
    });

$("#choice2").click(function() {
    NewArea($choice2);
    });

$("#choice3").click(function() {
    NewArea($choice3);
    });

$("#choice4").click(function() {
    NewArea($choice4);
    });

$("#choice5").click(function() {
    NewArea($choice5);
    });

});

and then we have file 2.js

function NewArea($area) {
    switch($area)
    {
    case "newgame": //Start of the game
        $("#textbox").html("blah");
        $("#choice1").html("Look around");
            $choice1 = "look_1";
        $("#choice2").html("Listen around");
            $choice1 = "listen_1";
        $("#choice3").html("Smell around");
            $choice1 = "smell_1";
        $("#choice4").html("Feel around");
            $choice1 = "feel_1";
        $("#choice5").html("Taste around");
            $choice1 = "taste_1";
        break;

    case "look_1":
        $("#textbox").html("blah2");
        $("#choice1").html("");
            $choice1 = "0";
        break;

    default:
        break;
    }
}

Answer 1

You should at least consider namespacing the global variables for clarity and slightly cleaner code. You can also make it an array rather than discrete variables so you can easily expand them if necessary (bearing in mind your indexing from your ids will be off by 1, since arrays are 0-indexed):

var myGame = {
    choices: [0, 0, 0, 0, 0];
};

As others have mentioned, the key is that this snippet of code loads before your file2.js (either by loading it in a separate file before file1.js and file2.js, or ensuring file1.js loads before file2.js).

You mention you don't know another way of doing this, and it seems like you're using a DOM-gnostic jQuery approach, so other things that may work (though not necessarily better) are:

• Storing the choices in hidden input fields. This will clutter your DOM instead of the global namespace. ;) So you can have <input type='hidden' value='0' name='choice1Value'/> and then get/set the value in there.
• You can also use the jQuery data function to store the value on each choice: $('#choice1').data('choice', 0); for example.

There are other refactorings you could consider as well, but it depends on the structure of your files and how you load them, but hopefully this provides a few ideas on different approaches.