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?