My problem is this. I create a javascript object
that has a function associated with it. I instantiate this object and when it is instantiated, it assigns its function as an onclick handler to a div element on the page.
Here is a simple html that I created to demonstrate the problem:
----------------------------------------------------------
<html ><head>
<script>
function TestObject(container){
this.testVar = 'I am defined in TestObject';
document.getElementById('a').onclick=this.handler;
this.handler()
}
TestObject.prototype.handler = function(evt){
alert(this.testVar)
}
</script>
</head><body >
<div id ='a'>Click Me</div>
</body></html>
<script>var testObject = new TestObject();</script>
----------------------------------------------------------
When I display the page, this.handler is called at the time the object is constructed and correctly display in the alert message the value of this.testVar. However, when I click on the "Click Me" text, the handler method is called correctly but the alert message displays "undefined", this.testVar is not recognized.
If you drill into this further by adding the following loop into handler()
for(var k in this){
alert('this[\''+k+'\'] is ' + this[k])
}
you realize that when handler is called at the first time, "this" refers to TestObject while when it is called from the click, it refers to teh document object.
I thought that when a function is made a part of an object, any "this" inside it references the object, yet it looks now that it refernces the object from where the function is called. Why? How can I make the handler recognize its parent even when it is called from the click.
I need to make it work this way, what I am trying to do is much more complicated than this simplistic example.
Can anyone help?
Thanks
that has a function associated with it. I instantiate this object and when it is instantiated, it assigns its function as an onclick handler to a div element on the page.
Here is a simple html that I created to demonstrate the problem:
----------------------------------------------------------
<html ><head>
<script>
function TestObject(container){
this.testVar = 'I am defined in TestObject';
document.getElementById('a').onclick=this.handler;
this.handler()
}
TestObject.prototype.handler = function(evt){
alert(this.testVar)
}
</script>
</head><body >
<div id ='a'>Click Me</div>
</body></html>
<script>var testObject = new TestObject();</script>
----------------------------------------------------------
When I display the page, this.handler is called at the time the object is constructed and correctly display in the alert message the value of this.testVar. However, when I click on the "Click Me" text, the handler method is called correctly but the alert message displays "undefined", this.testVar is not recognized.
If you drill into this further by adding the following loop into handler()
for(var k in this){
alert('this[\''+k+'\'] is ' + this[k])
}
you realize that when handler is called at the first time, "this" refers to TestObject while when it is called from the click, it refers to teh document object.
I thought that when a function is made a part of an object, any "this" inside it references the object, yet it looks now that it refernces the object from where the function is called. Why? How can I make the handler recognize its parent even when it is called from the click.
I need to make it work this way, what I am trying to do is much more complicated than this simplistic example.
Can anyone help?
Thanks