Why does document.getElementById('hyperlink_element_id') return the value of the hyperlink's href attribute?

Question

I'm trying to grab the Web.UI.WebControls.HyperLink object itself via javascript so that I can modify its ImageUrl.

Here I'm setting the hyperlink's NavigateUrl to the my javascript function call:

lnkShowHide.NavigateUrl = String.Format(
    "javascript:ShowHideElement('{0}');", lnkShowHide.ClientID
)

Here's my javascript function:

function ShowHideElement(img) {
   var ele = document.getElementById(img);
   if(ele != null) {
      // Not sure if this will change the hyperlink's ImageUrl property???
      img.src = 'smallPlus.gif';
   }
}

However, if I check the value of 'ele' after calling getElementById it prints "String.Format("javascript:ShowHideElement....." and doesn't actually get the hyperlink object itself.

Any ideas would be greatly appreciated!

Answer 1

What type of .NET control is lnkShowHide?

Answer 2

Why does document.getElementById() return the value of the hyperlink's href attribute?

It doesn't. But when you “alert(element)”, alert() calls toString() on the element, and HTMLLinkElement.toString() returns the contents of the href attribute, so “alert(link)” spits out the same results as “alert(link.href)”.

(Which is a bit weird and confusing, but that's how JavaScript 1.0 worked so there's not much can be done about it now.)

I check the value of 'ele' after calling getElementById it prints "String.Format("javascript:ShowHideElement....."

That shouldn't happen with the exact example you've given... there's no way the server-side “String.Format...” code should make its way through to the client side unless you accidentally enclosed it in quotes, eg.:

lnkShowHide.NavigateUrl = "String.Format(...)";

Other problems that spring to mind are that the function changes name (ShowHideElement/ShowHideImage), and you appear to be trying to set ‘.src’ on the link element (<a>). Links don't have .src, only images do.

Anyhow, you probably don't want to do a show/hide widget like this. javascript: URLs are always the wrong thing, and your example involves a lot of nested strings inside each other which is always fragile. You could try an ‘unobtrusive scripting’ approach, generating markup like:

<div class="showhide"> blah blah blah </div>

With JavaScript to add the open/close functionality at the client side (so non-JavaScript UAs and search engines will see the whole page without hiding bits). eg.:

function ShowHider(element) {
    var img= document.createElement('img');
    element.parentNode.insertBefore(img, element);

    function toggle() {
        var show= element.style.display=='none';
        element.style.display= show? 'block' : 'none';
        img.src= '/images/showhide/'+(show? 'open' : 'closed')+'.gif';
        img.alt= show? '-' : '+';
        img.title= 'Click to '+(show? 'close' : 'open');
    }
    img.onclick= toggle;
    toggle();
}

// Apply ShowHider to all divs with className showhide
//
var divs= document.getElementsByTagName('div');
for (var i= divs.length; i-->0;)
    if (divs[i].className=='showhide')
        ShowHider(divs[i]);