Javascript global variable not working

Question

I've seen a few versions of this question on here, but none of them seem to be the same as my issue, so figured I'd create a new question. I must be doing something very silly here, but for the life of me I cannot spot it.

I'll start with the context, although it is not particularly relevant: I am deferring loading of jQuery with js code, which means none of my code files can contain a $(document).ready(...) call, because "$" will be undefined at first pass. Instead I am adding my ready functions to a "global" array, and after jQuery loads asynchronously, I call all these functions with the following:

function FireLoadEvents() {
  while ( OnLoadEvents.length > 0 ) {
    var item = OnLoadEvents.splice(0,1);
    item[0].ready();
  }
}

Now in any of my page components I can use the following to add an event I wish to fire when jQuery is loaded and the document is actually ready:

OnLoadEvents.push( { ready: function() { ... } } );

I've defined the OnLoadEvents variable at the very top of my template in the head:

<script language="text/javascript">
var OnLoadEvents = new Array();
</script>

As you can see it is outside of any function scope, and it is also declared before it is referenced. When tested on its own, this setup is working great, but for some reason when it is added to my actual page heads, script tags later in the page are not able to add items to the OnLoadEvents variable. For instance the following is pulled into my template by a php-include server side, and adds these lines to the body of my page:

<script type='text/javascript'>
OnLoadEvents.push( { ready: function() {
  if ( $('.sponsor-link').length != 0 ) {
    ... 
  }
} } );
</script>

When I hit this page in Chrome, it reports the following exception on the "push" line above:

Uncaught ReferenceError: OnLoadEvents is not defined

Any idea what is going on? Why would OnLoadEvents be undefined just a few lines down from where I initialize it? I'll note that I've also tried defining and referencing OnLoadEvents as window.OnLoadEvents.

Thanks in advance!

Why would jQuery load asynchronously? Scripts normally load in sequence, thus you can just make sure jQuery loads first to use .ready(). Are you using the async or defer attribute? Are you using a script loader to load jQuery? — Joseph
– Joseph, Commented Dec 31, 2012 at 19:14
Style note: use var OnLoadEvents = []; instead of var OnLoadEvents = new Array(); see: yuiblog.com/blog/2006/11/13/javascript-we-hardly-new-ya — User
– User, Commented Dec 31, 2012 at 19:15
I think the important part is "HOW" is this code being added to the page. If you are adding scripts via innerHTML it will not execute the script. — epascarello
– epascarello, Commented Dec 31, 2012 at 19:16
@JosephtheDreamer I am using a custom script to fetch my JS files asynchronously in an attempt to improve page load times, per recommendation by link — Znd
– Znd, Commented Dec 31, 2012 at 19:20

Šime Vidas · Accepted Answer · 2012-12-31 19:20:08Z

7

Change this:

<script language="text/javascript">

to this:

<script>

The web-browser doesn't recognize the value of the language attribute and, as a result, doesn't execute the code.

Live demo: http://jsfiddle.net/gyhcM/2/

You don't need the language attribute, nor the type attribute, as the web-browsers assume JavaScript by default.

edited Dec 31, 2012 at 19:20

answered Dec 31, 2012 at 19:14

Šime Vidas

187k66 gold badges290 silver badges392 bronze badges

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

7 Comments

epascarello Over a year ago

<strike>That is not going to make a difference.</strike>

Oleg Mikheev Over a year ago

@epascarello not going to make a difference in which browser version on which OS? :)

Šime Vidas Over a year ago

@JosephtheDreamer Nope. The browser will read it, and if its value isn't valid, the script won't be executed at all.

epascarello Over a year ago

I thought it was "type", lol, I need more coffee. Today feels like a Friday!

Travis J Over a year ago

Yes, who uses language anyhow? It should be type (or not there). Good catch.

|

Collectives™ on Stack Overflow

Javascript global variable not working

1 Answer 1

7 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Related