Variable scope problem

D

De_Dood

Hello all,

I have a problem with the code below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="JavaScript">


function test() {
this.helloDiv = document.createElement("div");

this.show = function() {
this.helloDiv.style.backgroundColor = "red";
this.helloDiv.style.borderColor = "black";
this.helloDiv.style.borderStyle = "solid";
this.helloDiv.style.borderWidth = "1px";
this.helloDiv.innerHTML = "DIV";
date = new Date()
this.creationTime = date.getTime()
this.helloDiv.onclick = function clicked () {
alert(this.creationTime);
}
document.body.appendChild(this.helloDiv);
}
}

function init() {
var div1 = new test();
div1.show();
var div2 = new test();
div2.show();
}
</script>
</head>
<body onload="init()">
</body>
</html>

I'd like to access my "creationTime" variable defined in my "show"
function from within my onclick-event defined function.
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. But I can't find a solution on how to solve my problem.
Can someone help me with this.

Thanks in advance!

Kind regards,

Tim De Graeve
 
J

Jorge

I'd like to access my "creationTime" variable defined in my "show"
function from within my onclick-event defined function.
Click to expand...

'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.
Click to expand...

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.
Click to expand...

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,
 
D

De_Dood

'creationTime' is not a variable, but a property of 'div1'.


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.


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,
Click to expand...

Thanks a lot for the clear answer. It will help me a lot.

Kind regards,

Tim De Graeve
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Need help , Having problem with Drag n Drop... 1
Need help , Having problem with Drag n Drop ? 9
Help with code 0
How do I hide the modal after 5 seconds? 4
Filename undefined for Blob ? 1
Javascript not hiding nested elements simultaneously 2
Google sheets song request 3
Closing an overlay outside the overlay as well 1

Members online

Total: 24 (members: 1, guests: 23)
Robots: 360

Forum statistics

Threads
473,769
Messages
2,569,582
Members
45,066
Latest member
VytoKetoReviews

Latest Threads

Top