passing object property to DOM PROPERTY (NOT ATTRIBUTE!)

[Ctibor Laky]

This is my problem:

 
$(document).ready(function(){
 
subClass.prototype = document.createElement( 'div' );
subClass.prototype.constructor = subClass;
function subClass() {
    this.x = 5;
    }
 
var divTested = new subClass;
divTested.id = 'test';
 
alert(divTested.x); // works (result is 5)
 
document.body.appendChild(divTested);
 
$('#test').click(function() {alert(this.x);}); // doesnt work!
$('#test').css({'height': 30, 'width': 50, 'background': 'red'});
 
});
 

[Dormilich]

the problem why this.x doesn’t work is inheritance and the scope of your calls.

you have a <div> element, that is shared among all subClass instances (because you put it into the prototype).

when you create a subclass instance (divTested), you create a (primary) property x which is an unique (for that instance) instance property.

later you assign the id property, now is where the inheritance chain hooks in.
- first JS looks if there is (what I called primary property) an instance property named id – there isn’t
- next it looks in the prototype chain for such a property – it finds one in the inherited <div> => end
- if there would have been no such property in the prototype chain, a new (primary) instance property is created

up to line 14 no problems.

then it starts to go wrong. appendChild() expects a DOM Node to be given. divTested ain’t one, but it contains one in it’s inheritance chain so I assume, it uses the inherited <div> to insert into the document. that obviously drops everything related to the subClass instance.

next problem at line 17. you access the <div> element. as the <div> element is in the inhertance chain above the subClass instance, it has no knowledge of the x property of the subClass instance and thus you get undefined.