Global variable can't be accessed through window object - intermittently(?!)

Question

I have two pages, both with similar structures - tables with id tags like the following

<TABLE id="assetsTable1" width="100%" class="tableWrapDataClass"> ...

and

<table id="vocationalRevenueTable" class="revenue" width="100%"> ...

Both pages are using nearly identical javascript code. But the value of a global variable behaves differently on Page 2!

Here's a snippet of Page 1;

<script type="text/javascript" src="templates/footer.js"></script>
<script type="text/javascript" src="script/jquery-1.8.1.js"></script>
<script type="text/javascript" src="script/scripts.js"></script>
<script>
                $(document).ready(function() {
                    var assetsTable1 = $('#assetsTable1');
                    var assetsTable2 = $('#assetsTable2');
                    var liabilitiesTable1 = $('#liabilitiesTable1');
                    var liabilitiesTable2 = $('#liabilitiesTable2');
                    var shareholderTable = $('#shareholderTable');

                    // note not all subtotals are shown
                    $("#A2Row1").hide();
                    $("#A2Row2").hide();
                    $("#L2Row1").hide();
                    $("#L2Row2").hide();
                    console.log(window.assetsTable1);
                });
                // etc

and from Page 2,

<script type="text/javascript" src="templates/footer.js"></script>
<script type="text/javascript" src="script/jquery-1.8.1.js"></script>
<script type="text/javascript" src="script/scripts.js"></script>
<script>
                $(document).ready(function() {
                    var vocRevTableRef = $('#vocationalRevenueTable');
                    var nonVocRevTableRef = $('#nonVocationalRevenueTable');
                    var otherRevTableRef = $('#otherRevenueTable');

                    // note not all subtotals are shown initially
                    $("#vocationalRevenueTableSub").hide();
                    $("#nonVocationalRevenueTableSub").hide();
                    $("#otherRevenueTableSub").hide();
                    console.log(window.vocRevTableRef);
                });
                // etc

In Firebug, that console.log() call on Page 1 quite reasonable displays

<table id="assetsTable1" class="tableWrapDataClass" width="100%">

On page 2, however, it returns

undefined

But if I amend the console.log() calls on both pages to remove the 'window.' bit, eg;

console.log(assetsTable1);

and

console.log(vocRevTableRef);

Things return to sanity. In both cases, Firebug displays the Object

Object[table#vocRevTableRef.tableWrapDataClass]

and

Object[table#assetsTable1.tableWrapDataClass]

Something is going on with the window object. Of course this is utterly maddening. What could I possibly be missing? What should I be looking for to debug this? (The HTML doesn't appear to be malformed.) I'm simply trying to pass the object reference in question into a function that pulls rows out of thePassedReference.tbodies and sums them, but of course it fails on Page 2 since it's mysteriously passing an undefined value. Halp! Thanks.

Answer 1

Both variables are not global, the first example works because browsers allow to access elements via their ID a'la window.IdOfAnElement (the id of the element in example 1 is equal to the variable-name).

Note: console.log shows the markup of the DOMNode, when it would show the contents of the variable the result would be a jQuery-object, not a DOMNode

Answer 2

var vocRevTableRef is not global variable - remove 'var' and it will become one. Same goes for your other supposed-to-be global variables of course. Console.log on second example doesn't work, because hidden element $("#vocationalRevenueTableSub").hide(); became inaccessible.

Answer 3

On the first page, you are able to access window.assetsTable1 because you have an element with id="assetsTable1".It is not because of your variable (which is declared as var, so not global)

on the second page, there is no element with id="vocRevTableRef" and no global variable with name vocRevTableRef. hence it gives undefined.