Keeping your Javascript clean

Consider the direction type selector in Google Maps: http://i.imgur.com/5zQcp.png. I would create an object that manages all those buttons. The object would keep track of whichever button is selected and would probably emit an event that said "user changed selection." Then the controls that, say, sent a request to the server for a new set of directions would query the object for the current state.

Couple of advantages here.

1. It's UI-agnostic. That is, the other controls on the page don't have to care how it's actually rendered at all.

2. It's encapsulated. There's a single way to get the selected direction type.

3. It's much more test friendly. You've essentially abstracted away the DOM for that control.

The hard bit about doing this in JavaScript is it's unenforcable in a team environment. What's stopping the other devs from reaching in to the DOM and querying for the selected button?

Hope that helps a bit...