Accessing an elements ID from within an event handler

Actinia

03-21-2012, 09:50 PM

I have many examples within my page of the form:

<a id="L1" href="#" onclick="return showSpan();" onblur="return hideSpan();"> ... </a>

The page is styled so that hovering over the link displays the contents of the hidden as a block without any javascript. I want this to work (that is display the span as a block) when the user tabs onto a link (and presses Return/Enter). When the user tabs away, it should hide the .

My starting code looks like:

function showSpan() {
var linkID = document.getElementById(this.id);
var classList = linkID.getElementsByTagName('span');
var divID = classList[0];
divID.style.display = "block";
return false;
} // function

with a similar function for hideSpan(),

Ultimately I would like to add these event handlers in the initialisation phase, which is why I have used a parameterless function.

Whenever I try this, I get an error that this.id does not exist.

How can I attach these event handlers?

John Rostron

Old Pedant

03-21-2012, 10:05 PM

No no no...this is *NOT* available in the function. It's only available AT THE POINT OF THE EVENT. That is, within the element.

So you need to *PASS* it to the function:

<a href="#"
onclick="return showSpan(this,true);"
onblur="return showSpan(this,false);">
 ... 
</a>

and then it's easy:

function showSpan(link,show)
{
link.getElementsByTagName('span')[0].style.display = show ? "inline" : "none";
return false;
}

 elements *USUALLY* should use a display value of "inline", not "block", so I change that for you. But you can try "block" to see if it makes a difference.

[Actually, you don't need the return in the onblur handler, but it won't hurt.]

Old Pedant

03-21-2012, 10:09 PM

To do it via initialization, you probably do want an ID:

<a href="#" id="L1"
 ... 
</a>

and then your initialization code does this:

var link = document.getElementById("L1");
link.onclick = function() { return showSpan(this,true); };
link.onblur = function() { return showSpan(this,false); };

Old Pedant

03-21-2012, 10:10 PM

And pardon me for saying this, but

document.getElementById(this.id)

is a kind of silly construction. Because
document.getElementById(this.id) === this !!!!

Actinia

03-22-2012, 10:32 AM

Thanks to Old Pedant for this. I shall try this out. I had been looking in all my books, and the status of the this keyword was not at all clear, especially your last point: about the identity of this.

Actinia

03-22-2012, 10:48 AM

I have now tried it out and it works as required. My pages will now work for those unable or unwilling to use the mouse.

Thanks to Old Pedant.

John

Old Pedant

03-22-2012, 09:39 PM

Let me see if I can explain.

Let's use an example:

<html>
<body>
<a href="http://www.google.com" id="DEMO"
onclick="alert(this.id);alert( document.getElementById(this.id).href ); return false;" />
CLICK ME </a>
</body>
</html>

Okay, in that code, this refers to the element that it is found in. To wit, the <a> tag.

So the first alert there will, as I hope you expect, show DEMO to you.

Makes sense, yes? The element is <a>. The id of the element is DEMO. this.id is thus DEMO.

In the second alert, then, when we use this.id, we are really using the string DEMO, right?

So we are doing document.getElementById("DEMO") (effectively).

And what do you think that function call returns?

A *reference* the element that has the id DEMO.

And just what element is that? Why the very same <a> element.

SO....

this is a reference to the <a> element.

document.getElementById(this.id) is a reference to the SAME <a> element.

Or, as I stated
document.getElementById(this.id) === this

They are 100% equivalent. And to prove it yet again, let's change the above code:

<html>
<body>
<a href="http://www.google.com" id="DEMO"
onclick="alert(this.id);alert( this.href ); return false;" />
CLICK ME </a>
</body>
</html>

Okay?