By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,609 Members | 3,812 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,609 IT Pros & Developers. It's quick & easy.

Re: Variable scope problem

P: n/a
On Sep 28, 9:55 am, De_Dood <TimD...@gmail.comwrote:
I'd like to access my "creationTime" variable defined in my "show"
function from within my onclick-event defined function.
'creationTime' is not a variable, but a property of 'div1'.
I've come so far to discover that the "this" in my onclick-event
function points to the div element and not to one of the 'test'
objects.
Yes, that's the way it's suppossed to be. When you click on a 'div',
'this' ought to point to the element in which you've clicked.
But I can't find a solution on how to solve my problem.
Can someone help me with this.
This code:

var div1 = new test();
div1.show();

is doing +/- this :

div1= {}; //(an object)
div1.creationTime= ...;
div1.show= function () { ... };
..
div1.helloDiv= document.createElement("div");
div1.helloDiv.onclick= function () { ... };

IOW:
div1 is an object that has an attribute ('helloDiv'), an attribute
('creationTime'), and a method ('show').
hellodiv is a ('div') DOMElement that has an onclick handler (the
'onclick' method).

clicking on 'helloDiv' sets 'this' to helloDiv, not to div1. You ought
to attach 'creationTime' to helloDiv instead:

this.helloDiv.creationTime = date.getTime();

Or perhaps something like:

<script>
function divCreator (parent, inner) {
var div= document.createElement("div");
div.myParent= parent;
div.inner= inner;
div.show= function () {
this.style.backgroundColor= "red";
this.style.borderColor= "black";
this.style.borderStyle= "solid";
this.style.borderWidth= "1px";
this.innerHTML= this.inner;
this.creationTime= (new Date()).getTime()
this.onclick= function () {
alert(this.creationTime);
};
this.myParent.appendChild(this);
return this;
};
return div;
};
function init () {
var div1, div2;
div1= divCreator(document.body, 'div1');
div1.show();
div2= divCreator(document.body, 'div2');
div2.show();
};
</script>

HTH,
--
Jorge
Sep 28 '08 #1
Share this Question
Share on Google+
1 Reply


P: n/a
On 28 sep, 12:05, Jorge <jo...@jorgechamorro.comwrote:
On Sep 28, 9:55 am, De_Dood <TimD...@gmail.comwrote:
I'd like to access my "creationTime" variable defined in my "show"
function from within my onclick-event defined function.

'creationTime' is not a variable, but a property of 'div1'.
I've come so far to discover that the "this" in my onclick-event
function points to the div element and not to one of the 'test'
objects.

Yes, that's the way it's suppossed to be. When you click on a 'div',
'this' ought to point to the element in which you've clicked.
But I can't find a solution on how to solve my problem.
Can someone help me with this.

This code:

var div1 = new test();
div1.show();

is doing +/- this :

div1= {}; //(an object)
div1.creationTime= ...;
div1.show= function () { ... };
.
div1.helloDiv= document.createElement("div");
div1.helloDiv.onclick= function () { ... };

IOW:
div1 is an object that has an attribute ('helloDiv'), an attribute
('creationTime'), and a method ('show').
hellodiv is a ('div') DOMElement that has an onclick handler (the
'onclick' method).

clicking on 'helloDiv' sets 'this' to helloDiv, not to div1. You ought
to attach 'creationTime' to helloDiv instead:

this.helloDiv.creationTime = date.getTime();

Or perhaps something like:

<script>
function divCreator (parent, inner) {
* var div= document.createElement("div");
* div.myParent= parent;
* div.inner= inner;
* div.show= function () {
* * this.style.backgroundColor= "red";
* * this.style.borderColor= "black";
* * this.style.borderStyle= "solid";
* * this.style.borderWidth= "1px";
* * this.innerHTML= this.inner;
* * this.creationTime= (new Date()).getTime()
* * this.onclick= function () {
* * * alert(this.creationTime);
* * };
* * this.myParent.appendChild(this);
* * return this;
* };
* return div;};

function init () {
* var div1, div2;
* div1= divCreator(document.body, 'div1');
* div1.show();
* div2= divCreator(document.body, 'div2');
* div2.show();};

</script>

HTH,
--
Jorge
Thanks a lot for the clear answer. It will help me a lot.

Kind regards,

Tim De Graeve
Sep 28 '08 #2

This discussion thread is closed

Replies have been disabled for this discussion.