oop - JavaScript: Create global Object from inside Prototype dom loaded event -

I want to create an object that can be accessed worldwide after the DOM loads. My approach is to use Prototype dom: Instant loading and events.

Javascript code:

  document.observe ("dom: loaded", function {var globalpao = new picArrayObject (); warning (globalPAO. PicArray [0]); // Alert [Object HTMLDivElement]}); Var picArrayObject = function () {var myPic1 = document.getElementById ('pic1'); Var myPic2 = document.getElementById ('pic2'); Var myPic3 = document.getElementById ('pic3'); Create function () {this.picArray = [myPic1, myPic2, myPic3]; } Return new build (); } MyTrigger.onClick = function ({warning (globalPAO.picArray [0]); // Alert Nothing}  

Try it yourself:

Three things that I see:

1. You have to assign click handler inside the " dom: loaded " handler, else ID The element with trigger can not yet exist (in fact, this error has been shown in the error console in Safari:

   Writing Error: The Outcome of Expression 'MyTrigger' [invalid] is not an object. / P>

   ).

2. Using new build return () looks overly complex.

3. var globalPAO creates a local variable that you leave, then on You create a global one

Better example:.

> document.observe ("dome: load", function () {globalPAO = new picArrayObject (); warning (globalPAO.picArray [0]); // myTrigger on Alert [Object HTMLDivElement] = Document.getElementById ('trigger'); myTrigger.onclick = function () {warning (global poppy array [0]); // alert object HTMLDivElement]}}); Var picArrayObject = function () {var myPic1 = document.getElementById ('pic1'); Var myPic2 = document.getElementById ('pic2'); Var myPic3 = document.getElementById ('pic3'); This.picArray = [myPic1, myPic2, myPic3]; }

Try this yourself: