Getting a button element's value attribute (not innerHTML) in IE

After spending a small part of my evening debugging Javascript in IE (which is ALWAYS a pleasure), I found out one of my errors was a mistake I had made before… trying to access button.value in IE. IE, of course, being IE, returns the innerHTML value of the button, instead of the value attribute. Last time I ran into this, I used a class instead of value, and moved on with my life. Tonight, I was feeling stubborn, and I found a better way…

target.value = target.getAttributeNode(‘value’).nodeValue;

I’m sure I’m about the millionth person to discover this, but I couldn’t find it anywhere using standard searches, so I thought I’d try to emphasize it here so others could find it. (Hopefully it’s not so common that everyone else knows it!)

At first, I used the following:

target.value = target.attributes.getNamedItem(‘value’).nodeValue;

Then I looked at Flanagan’s Javascript: The Definitive Guide (using his amazon associates link), where he states that IE implementation of the attributes array,“makes it impossible to use this feature portably.” He doesn’t mention which version of IE (this specific line of code worked in IE6, IE7, and IE8a), but I figured I’d go with the more general version.

If you read this, I hope I could save you a bit of time.

P.S. – I used IE8a’s Debugger to help. Here’s hoping they develop it further before the standard release. It’s MUCH better than flying blind, but I can’t imagine a less helpful message than specifying an object in the console, and seeing “{…}”.

Microformats for you and me

After nearly 3 months sitting on my bookshelf, I got around to

What and How

Very simply, Microformats give our already semantic xhtml elements an extra layer of meaning when using a common set of attribute values. Consider the case of an “hCalendar”, a microformat that gives xhtml the structure of an events calendar. An events calendar is simply a set of events. This relationship is easily described by a parent-children relationship. The problem is that xhtml can easily describe parent-children relationships, yet it cannot semantically describe this calendar-events relationship. Microformats do just that… they provide a way to describe this common relationship through the use of attribute values.

To create an “hCalendar”, you would write something like the following:

> <div class="vcalendar">
> 
> > <span class="vevent"/>  
> > <div class="vevent"/>  
> > <dl class="vevent"/>
> 
> </div>

As you can see, the supplementary calendar-events structure is added by setting specific attribute values, in this case ‘vcalendar’ and ‘vevent’. Microformats use exiting attributes like ‘class’ and ‘rel’ as hooks for this structure, in the same way these attributes can be used as hooks for additional CSS information. Additionally, these attributes can be applied to whichever element you choose*. I demonstrated the use of the same attribute/value pair (class=“vevent”) on the ‘span’, ‘div’, and ‘dl’ elements in the example above.

[* The rules for applying attributes to elements are the same as the existing xhtml spec]

Why you should use them

While I foresee a wide array of future uses for Microformats, there are limited practical applications today. That being said, the small number does not mean they have limited value; their use can provide substantial value. For example: later this week I am going to re-write the concert-listing page for my orchestra website. I am going to use the hCalendar Microformat to code this season’s events. I will then use an open-source converter to allow users to download a iCal file of this calendar on the fly.

Why would I do this? Because it’s advantageous. Using the hCalendar Microformat I can…