Question

I have the following JS code on my site:

function foo(link) {
    alert('ID=' + link.DocumentID + '; Lang=' + link.Language);
}

which should be called on each click on the following link:

<a href='http://www.example.com' DocumentID='someDocId' Language='en' onclick='foo(this);'>Example page</a>

(this is just a simplified version of my actual code, but it works exactly the same; I needed few nonstandard attributes, like DocumentID and Language for tracking purposes).

The problem is that foo() function does not fire on click event. When I changed the Language attribute name to i.e. Lng function everything works fine. I’ve tested it on IE7/8 and FF (the most current version).

According to W3C HTML4 standard Language attribute is not valid for anchor tag. I know it’s valid for <script> tag but I don’t see any relation.

Does anybody know why setting the Language attribute prevented from firing onclick event (I haven’t tried with other event types but they also could be affected)?

Answer 1

Only IE 7/8 synchronizes custom attributes and properties.

link.href; // 'http://www.example.com'
link.language; // undefined (except in IE 7/8)

It’s preferable to use getAttribute:

link.getAttribute('href'); // 'http://www.example.com'
link.getAttribute('language'); // 'en'

Attributes are case-insensitive in HTML, and case-sensitive in XML documents (including XHTML).

Don’t confuse deprecated language attribute on HTMLScriptElement with lang attribute on HTMLElement.

P.S. Like someone already said, it’s better to use HTML5 data-* attributes.