dom - Undefined error using javascript objects -

i newbie javascript objects , have problem. trying make image gallery keep getting error this.current, this.size & this.initial undefined, , therefore, script cannot work. please me resolve error. following full script.

function gallery() {     this.image = new array(10);     this.initial = 1;        this.current = 0;     this.size = 10;     this.frame_height = 400;     this.frame_width = 600;     this.initialize=function()     {         if(document.images)         {             var count = 1;             for(count=1;count<=this.size;count++)             {                this.image[count] = new image();                this.image[count].src = 'images/'+count+'.jpg';                              }         }      divimg.id = "divimg";        divimg.setattribute("width",this.frame_width);     divimg.setattribute("align","center");        divimg.setattribute("margin","0px auto");        divbtn.id = "divbtn";         divbtn.setattribute("align","center");       divbtn.setattribute("backgroung-color","black");      divbtn.setattribute("color","white");      divbtn.style.margin = "0px auto";        divbtn.classname ="btn";      pictureframe.src = this.image[this.initial].src;     pictureframe.setattribute('width',this.frame_width);     pictureframe.setattribute('height',this.frame_height);     pictureframe.name = 'img';      btnnext.innerhtml='next';     btnprevious.innerhtml='previous';     btnlast.innerhtml='last';     btnfirst.innerhtml='first';      btnfirst.onclick=this.first;     btnlast.onclick=this.last;     btnprevious.onclick=this.previous;     btnnext.onclick=this.next;        myform.appendchild(pictureframe);     divimg.appendchild(myform);      divbtn.appendchild(btnfirst);     divbtn.appendchild(btnprevious);     divbtn.appendchild(btnnext);     divbtn.appendchild(btnlast);      pagebody.appendchild(divimg);     pagebody.appendchild(divbtn);     headertag.appendchild(pagebody); }  this.next=function() {     alert(this.size);     alert(this.current);     if (this.current < this.size)      {         this.current +=1;         pictureframe.src = this.image[this.current].src;     }     else     {         alert("this last image");     } }    this.previous=function() {     alert(this.current);     alert(this.initial);     if (this.current > this.initial)      {         this.current = this.current-1;         pictureframe.src = this.image[this.current].src;     }     else      {         alert("this first image");     }  } this.first=function() {     this.current=this.initial;     pictureframe.src = this.image[this.current].src; } this.last=function() {     alert(this.size);     this.current=this.size;     pictureframe.src = this.image[this.current].src; }  };  var divimg= document.createelement('div'); var divbtn = document.createelement('div'); var btnfirst= document.createelement('button'); var btnnext= document.createelement('button'); var btnprevious= document.createelement('button'); var btnlast= document.createelement('button'); var divtop = document.createelement('div'); var headertag = document.getelementsbytagname('html')[0]; var pagebody = document.createelement('body'); var myform=document.createelement("form"); var pictureframe = document.createelement('img');   var pics=new gallery(); window.onload=pics.initialize(); 

you're expierencing out of scope failure common people new ecmascript.

every function has it's own execution context , each context in ecma-/javascript has own this context variable. avoid this, common way store reference "outer" this context-variable in local variable:

function gallery() {     this.image = new array(10);     this.initial = 1;        this.current = 0;     this.size = 10;     this.frame_height = 400;     this.frame_width = 600;      var self = this;      //...      this.initialize=function()     {         if(document.images)         {             var count = 1;             for(count=1;count<=self.size;count++)             {                self.image[count] = new image();                self.image[count].src = 'images/'+count+'.jpg';                              }         }     // ... 

this work in every javascript environment. in meantime, there "better" (other) ways avoid problem in ecma. instance, ecmascript edition 5 introduces .bind() method let "bind" reference this context variable object of choice. lots of javascript frameworks offer pretty similar way of binding this object, javascript lets little effort.