Yet another this (keyword) question

Olumide

unread,

Mar 29, 2004, 3:02:46 AM3/29/04

to

My HTML document contains the Image tag:

Strangely however, in the function moveIcon(), the keyword this is
defined but this.id is undefined! Why?

Thanks

- Olumide

////////////// C O D E //////////////

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">

function moveIcon(){
alert(this); // Ok - object
alert(this.id); // Undefined!?! ... WHY???
}

// -->
</script>

</head>
<body text="#000000" onLoad="wiper()" bgcolor="#999999">
<img id="icon" onMouseDown="moveIcon()" src="Trolley1_TH.gif"
width="100" height="100">
</body>
</html>

Richard Cornford

unread,

Mar 29, 2004, 4:29:37 AM3/29/04

to

"Olumide" wrote:
> My HTML document contains the Image tag:
>
> <img id="icon" onmousedown="moveIcon()" src="Trolley1_TH.gif"
> width="100" height="100">
>
> Strangely however, in the function moveIcon(), the keyword this is
> defined but this.id is undefined! Why?

<snip>

The - this - keyword always refers to an object in any context. Most of
the time, and in your code, it refers to the global object (which
doesn't have an - id - property unless given one). When a function is
executed as a method of an object then the - this - keyword refers to
that object. But your - moveIcon - function is a globally defined
function being called using an unqualified identifier, as such the
function is a property of the global object and the scope resolution of
the identifier will result in it being called as a method of the global
object.

The event handling function that is created using the code provided as
the value for the - onmousedown - attribute is called as a method of the
IMG element so within that code - this - does refer to the IMG element.

> <script language="JavaScript">

Valid HTML 4 requires that script elements have a type attribute. The
language attribute is deprecated and redundant when the required type
attribute is used.

> <!--

The practice of hiding scripts form "older browsers" with HTML-style
comment tags is now an anachronism as those "older" browsers have long
since gone out of use. The oldest browsers around now know exactly how
to handle a script element.

>
> function moveIcon(){
> alert(this); // Ok - object
> alert(this.id); // Undefined!?! ... WHY???
> }

<snip>

Try:-

onmousedown="moveIcon(this);"

- with:-

function moveIcon(imgEl){
alert(imgEl);
alert(imgEl.id);
}

The event handling function will then pass a reference to the IMG
element on to the - moveIcon - function when it calls it, using the -
this - keyword, that, in the context of the event handler, does refer to
the IMG element.

Richard.

Michael Winter

unread,

Mar 29, 2004, 4:48:35 AM3/29/04

to

On 29 Mar 2004 00:02:46 -0800, Olumide <50...@web.de> wrote:

> My HTML document contains the Image tag:
>
> <img id="icon" onmousedown="moveIcon()" src="Trolley1_TH.gif"
> width="100" height="100">
>
> Strangely however, in the function moveIcon(), the keyword this is
> defined but this.id is undefined! Why?

The 'this' operator in functions refers to the calling function. When you
add a handler like you do above, it's the same as:

imgRef.onmousedown = function() {
moveIcon();
}

The anonymous function receives a reference in 'this' that refers to the
IMG, but 'this' in moveIcon() refers to the anonymous function. There are
two ways around it:

1) Assign a reference to moveIcon directly to the event property, or
2) Allow moveIcon to take an argument that refers to the IMG element.

So,

imgRef.onmousedown = moveIcon; // No parentheses

or

onmousedown="moveIcon(this)"

I'd recommend the latter. It's not only simpler, but likely to work in
more browsers.

> <html>

All HTML documents should contain a document type declaration (DTD).

<URL:http://www.w3.org/TR/html401/struct/global.html#h-7.2>

Unless you decide to upgrade to style sheets, use the Transitional DTD.

> <head>
> <title>Untitled Document</title>
> <meta http-equiv="Content-Type" content="text/html;
> charset=iso-8859-1">
>
> <script language="JavaScript">

This should read

The type attribute is required, and the language attribute has been
deprecated and should not be used.

> <!--

Script hiding is an obsolete practice that is no longer necessary. Remove
the SGML comment delimiters.

[snipped remaining HTML]

Hope that helps,
Mike

--
Michael Winter
M.Wi...@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)