Javascript OOP Inheritence and DOM targeting

[Asperon]

I am currently working on a library of code that is in its very very early stages and I am experimenting with different methods of organizing it. What I have is a superclass that will hold functions common to all of the different subclasses that will branch from it. Here is my superclass:

*NOTE: JApp Object was initially an indirect object, but I switched not sure if that was part of the issues, I now it is not, so I will be switching it back (doesn't really change much though)



function JAppObject(){
// Attributes
this.dom; // Set later with setDom()
this.id;

}
// Methods

// Function: setDom()
// Purpose: To set the dom attribute after the actual html has been written
// Parameters: None
// Return: None

JAppObject.prototype.setDom = function(){
// Set DOM to dom
this.dom = document.getElementById ? document.getElementById(this.id) : document.all[this.id];

// Return
return;
}

// Function: setStyle(s, v)
// Purpose: Sets a CSS style
// Parameters:
// s:String - The style being set
// v:String - The value of the style being set
// Return: None

JAppObject.prototype.setStyle = function(s, v){
// Set style
this.dom.style[s] = v;

// Return
return;
}

// Function: setPos(pos)
// Purpose: Moves the object to an x and y location.
// Parameters:
// p:Array - 0: x position, 1: y position
// Return: None

JAppObject.prototype.setPos = function(pos){
// Set x position
if(pos[0] != ""){
this.dom.style.left = pos[0]+"px";
}
// Set y position
if(pos[1] != ""){
this.dom.style.top = pos[1]+"px";
}
// Return
return;
}
Here is the first subclass that uses the superclass



// Class: JAppWindow()
// Purpose:
// Parameters:
// Return:
JAppWindow.prototype = new JAppObject;
//JAppWindow.prototype.constructor = JAppWindow;
function JAppWindow(){

// Variable init
this.id = JApp.newObjectName(); // This function just returns "obj_"+n++;

// Create div
document.getElementById("body").innerHTML += '<div id="'+this.id+'" class="window"></div>';
this.setDom();

// Return
return;
}
Now if I were to implement this code like this:



a = new JAppWindow();
a.setPos(Array(50,50));

b = new JAppWindow();
b.setPos(Array(100, 100));

c = new JAppWindow();
c.setPos(Array(150, 150));

d = new JAppWindow();
d.setPos(Array(200, 200));

e = new JAppWindow();
e.setPos(Array(250, 250));
it works just fine, however, if I implement it this way:



a = new JAppWindow();
b = new JAppWindow();
c = new JAppWindow();
d = new JAppWindow();
e = new JAppWindow();

a.setPos(Array(50, 50));
b.setPos(Array(100, 100));
c.setPos(Array(150, 150));
d.setPos(Array(200, 200));
e.setPos(Array(250, 250));
It only the last setPos function works.

I can't figure out why this behavior is doing this, they all have separate ids, they are all new instances.

See the attachment for the full source

[NZWebster]

I was looking at the source that was generated after the page has been loaded etc.


<div id="body">
<div id="obj_0" class="window"></div>
<div id="obj_1" class="window"></div>
<div id="obj_2" class="window"></div>
<div id="obj_3" class="window"></div>
<div id="obj_4" class="window" style="left: 200px; top: 200px; "></div>
</div>

You can see the object 4 is the only one that has the left and top set. However, if you put alert on any of the objects, you get the correct position returned (from the objects dom property).


alert(a.dom.style.left)
alert(b.dom.style.left)
alert(c.dom.style.left)
alert(d.dom.style.left)
alert(e.dom.style.left)

I believe the documents DOM is being overridden after the objects are instantiated.

Try adding this to the end of the HTML script, and it is clear.

alert(document.getElementById(d.id) == d.dom);

I guess a quick fix would be to reference the documents DOM each time:

JAppObject.prototype.setPos = function(pos){
// Set x position
if(pos[0] != ""){
$(this.id).style.left = pos[0]+"px";
}
// Set y position
if(pos[1] != ""){
$(this.id).style.top = pos[1]+"px";
}
// Return
return;
}

This might be because objects in javascript are not passed by reference, and only the value is passed. So when we modify the objects 'dom' it is not updating the document dom. However this would not explain why the last object created is working as expected?