'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 createFieldAnchor(field, linkText)
{
var anchor = document.createElement("a");
anchor.field = field;
anchor.href='javascript:this.focusField()';
anchor.innerHTML = linkText;
anchor.focusField = function()
{
var f = this.field;
f.focus();
f.select();
}
return anchor;
}

The link does not work. Debugging shows that the problem is in
'javascript:this.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.autoIncSeed == 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 createFieldAnchor2(field, linkText)
{
var anchor = document.createElement("a");
anchor.field = field;
anchor.id = 'dynamicId'+genAutoInc(field.ownerDocument);
anchor.href='javascript:document.getElementById("'+anchor.id
+'").focusField()';
anchor.innerHTML = linkText;
anchor.focusField = 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 createFieldAnchor(field, linkText)
{
var anchor = document.createElement("a");
anchor.field = field;
anchor.href='javascript:this.focusField()';
anchor.innerHTML = linkText;
anchor.focusField = function()
{
var f = this.field;
f.focus();
f.select();
}
return anchor;
}

The link does not work. Debugging shows that the problem is in
'javascript:this.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.autoIncSeed == 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 createFieldAnchor2(field, linkText)
{
var anchor = document.createElement("a");
anchor.field = field;
anchor.id = 'dynamicId'+genAutoInc(field.ownerDocument);
anchor.href='javascript:document.getElementById("'+anchor.id
+'").focusField()';
anchor.innerHTML = linkText;
anchor.focusField = 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:crosshair")
3) Give the span an onClick eventhandler.
4) add onClick() to the span and call some function with the right
parameters, eg onClick="focusMe('field1');"

function focusMe(fieldName){
document.forms["yourformnamehere"][fieldName].focus();
}

Could that help?

Regards,
Erwin Moller

 

[Álvaro G. Vicario]

Peter Laman escribió:

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>):

Just a crazy idea, being ignorant of your actual needs... Have you
considered using HTML labels? They produce the same effect you describe:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="es">
<head><title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
input:focus{
background-color: yellow;
}
label{
border-bottom: 1px dotted black;
}
--></style>
</head>
<body>

<form action="" method="get" onsubmit="return false">

<p>
<label for="i1">Go to no. 1</label>
<label for="i2">Go to no. 2</label>
<label for="i3">Go to no. 3</label>
<label for="i4">Go to no. 4</label>
<label for="i5">Go to no. 5</label>
<label for="i6">Go to no. 6</label>
<label for="i7">Go to no. 7</label>
<label for="i8">Go to no. 8</label>
<label for="i9">Go to no. 9</label>
</p>

<p><input id="i1"></p>
<p><input id="i2"></p>
<p><input id="i3"></p>
<p><input id="i4"></p>
<p><input id="i5"></p>
<p><input id="i6"></p>
<p><input id="i7"></p>
<p><input id="i8"></p>
<p><input id="i9"></p>
</form>

</body>
</html>



(CSS is only for visual reference: it works in Firefox, Opera... and
probably not in IE)

 

[Thomas 'PointedEars' Lahn]

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 createFieldAnchor(field, linkText)
{
var anchor = document.createElement("a");
anchor.field = field;
anchor.href='javascript:this.focusField()';
anchor.innerHTML = linkText;
anchor.focusField = function()
{
var f = this.field;
f.focus();
f.select();
}
return anchor;
}

The link does not work. Debugging shows that the problem is in
'javascript:this.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="alternative" 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.getElemById(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(field, linkText)
{
// the local variable keeps the value private;
// if you don't want that, use this.anchor and the like;
var anchor = dhtml.createElement("a");

this.field = field;

var me = this;

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

// feature-test this before, and avoid this;
// append a text node or several other node objects instead
anchor.innerHTML = 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.prototype = {
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(dhtml.getElemById("foo"), "bar");
document.body.appendChild(a.getNode());


HTH

PointedEars