'this' and <A HREF="...">

[Peter Laman]

In my app I need to dynamically generate a series hyperlinks. Each
hyperlink's action must be to focus a field in a <form>. I created the
following function to create such a link (the argument is a field
object, e.g. <input>):

function createFieldAnch or(field, linkText)
{
var anchor = document.create Element("a");
anchor.field = field;
anchor.href='ja vascript:this.f ocusField()';
anchor.innerHTM L = linkText;
anchor.focusFie ld = function()
{
var f = this.field;
f.focus();
f.select();
}
return anchor;
}

The link does not work. Debugging shows that the problem is in
'javascript:thi s.focusField()' . The 'this' operator does not refer to
the anchor here (as I expected), but to the window object!

Is there a simple way to get a reference to the anchor in that
context?

I thought up the following 'tricky' solution, which works, but it's
not a very elegant solution:

//General function to implement auto-increments on an object.
function genAutoInc(obj)
{
if (obj.autoIncSee d == null) {
obj.autoIncSeed = 0;
}
obj.autoIncSeed ++;
return obj.autoIncSeed ;
}

//This version assigns a unique ID to the anchor and uses that to
refer to it in the HREF.
function createFieldAnch or2(field, linkText)
{
var anchor = document.create Element("a");
anchor.field = field;
anchor.id = 'dynamicId'+gen AutoInc(field.o wnerDocument);
anchor.href='ja vascript:docume nt.getElementBy Id("'+anchor.i d
+'").focusField ()';
anchor.innerHTM L = linkText;
anchor.focusFie ld = function()
{
var f = this.field;
f.focus();
f.select();
}
return anchor;
}

[Erwin Moller]

Peter Laman schreef:

In my app I need to dynamically generate a series hyperlinks. Each
hyperlink's action must be to focus a field in a <form>. I created the
following function to create such a link (the argument is a field
object, e.g. <input>):

function createFieldAnch or(field, linkText)
{
var anchor = document.create Element("a");
anchor.field = field;
anchor.href='ja vascript:this.f ocusField()';
anchor.innerHTM L = linkText;
anchor.focusFie ld = function()
{
var f = this.field;
f.focus();
f.select();
}
return anchor;
}

The link does not work. Debugging shows that the problem is in
'javascript:thi s.focusField()' . The 'this' operator does not refer to
the anchor here (as I expected), but to the window object!

Is there a simple way to get a reference to the anchor in that
context?

I thought up the following 'tricky' solution, which works, but it's
not a very elegant solution:

//General function to implement auto-increments on an object.
function genAutoInc(obj)
{
if (obj.autoIncSee d == null) {
obj.autoIncSeed = 0;
}
obj.autoIncSeed ++;
return obj.autoIncSeed ;
}

//This version assigns a unique ID to the anchor and uses that to
refer to it in the HREF.
function createFieldAnch or2(field, linkText)
{
var anchor = document.create Element("a");
anchor.field = field;
anchor.id = 'dynamicId'+gen AutoInc(field.o wnerDocument);
anchor.href='ja vascript:docume nt.getElementBy Id("'+anchor.i d
+'").focusField ()';
anchor.innerHTM L = linkText;
anchor.focusFie ld = function()
{
var f = this.field;
f.focus();
f.select();
}
return anchor;
}

Hi,

I think you can avoid this whole mess by NOT using the javascript
pseudocode in your hyperlinks.
I think that is the reason your 'this' is the windowsobject.
Try this:
1) remove the anchortags completely
2) replace them by a span tag. (If you miss your hyperlinkcursor , use
the cursor CSS solution, eg style="cursor:c rosshair")
3) Give the span an onClick eventhandler.
4) add onClick() to the span and call some function with the right
parameters, eg onClick="focusM e('field1');"

function focusMe(fieldNa me){
document.forms["yourformnamehe re"][fieldName].focus();
}

Could that help?

Regards,
Erwin Moller

[Thomas 'PointedEars' Lahn]

Peter Laman wrote:

In my app I need to dynamically generate a series hyperlinks. Each
hyperlink's action must be to focus a field in a <form>. I created the
following function to create such a link (the argument is a field
object, e.g. <input>):

function createFieldAnch or(field, linkText)
{
var anchor = document.create Element("a");
anchor.field = field;
anchor.href='ja vascript:this.f ocusField()';
anchor.innerHTM L = linkText;
anchor.focusFie ld = function()
{
var f = this.field;
f.focus();
f.select();
}
return anchor;
}

The link does not work. Debugging shows that the problem is in
'javascript:thi s.focusField()' .

http://jibbering.com/faq/#FAQ4_24

The 'this' operator

`this' is _not_ an operator.

does not refer to the anchor here (as I expected), but to the window object!

this, literally, is unsurprising. However, it does not necessarily refer to
the object referred to by the host-defined `window' property of the Global
Object, but rather to the Global Object itself.

Is there a simple way to get a reference to the anchor in that
context?

Yes, there is:

<a href="alternati ve" onclick="... this ... ">...</a>

However, your needs go further and your code points out a confusion between
host objects and native objects on your part. Trying to augment DOM host
objects with a property as you do is a really bad idea because of what the
ECMAScript Specification says about that and what implementations exhibit.

You really want to use a wrapper method instead:

function focusField(a)
{
// call another wrapper method for ensuring compatibility;
// see also http://PointedEars.de/scripts/dhtml.js
var f = dhtml.getElemBy Id(a.id + "_field");
if (f)
{
// add feature tests here
f.focus();
f.select();
}
}

Since you are using a method to create your special anchor already, it would
be prudent to make the focusField() method a property of a wrapper object:

function FieldAnchor(fie ld, linkText)
{
// the local variable keeps the value private;
// if you don't want that, use this.anchor and the like;
var anchor = dhtml.createEle ment("a");

this.field = field;

var me = this;

// call wrapper method for ensuring compatibility
_addEventListen er(anchor, "click",
function() {
me.focusField() ;
});

// feature-test this before, and avoid this;
// append a text node or several other node objects instead
anchor.innerHTM L = linkText;

// Allows "protected" read access to the "private" variable.
// (must be defined here and not as a prototype method)
this.getNode = function() {
return anchor;
};
}

FieldAnchor.pro totype = {
constructor: FieldAnchor,
focusField: function() {
var f = this.field;
if (f)
{
// add feature tests here
f.focus();
f.select();
}
}
};

// example; add more feature tests here
var a = new FieldAnchor(dht ml.getElemById( "foo"), "bar");
document.body.a ppendChild(a.ge tNode());
HTH

PointedEars
--
Use any version of Microsoft Frontpage to create your site.
(This won't prevent people from viewing your source, but no one
will want to steal it.)
-- from <http://www.vortex-webdesign.com/help/hidesource.htm>