Yesterday I was caught once again having to add onclick="highlight(this)" to a list of 20-some checkboxes in a row. In the past, I’d looked at how to add those events dynamically, particularly in light of the fact that the code was generic, I didn’t need to be passing in a specific id or anything.

After attending the DOM Scripting session at @Media a few weeks ago, I’ve been really wanting to see what we could automate using scripting. And lo and behold, one of the latest articles on A List Apart is by the presenter himself, Jeremy Keith. The article, behaviour separation, immediately struck a chord with me.

(x)HTML, CSS, DOM scripting. Separation of church and state content, presentation and behaviour. Yet we’ve become pretty good at separating content and presentation, but not content and behaviour.

Say hello to unobtrusive javascript.

Some more surfing around, I found Keith’s speaker notes from @Media 2005, on javascript. Will have to check that out as well!

eg:

<ul id="imagegallery">
<li><a href="images/andy.jpg">Andy</a></li>
<li><a href="images/ian.jpg">Ian</a></li>
<li><a href="images/doug.jpg">Doug</a></li>
</ul>
<img src="images/placeholder.jpg" alt="my gallery" id="placeholder" />

function prepareGallery() {
  if (!document.getElementsByTagName) return false;
  if (!document.getElementById) return false;
  if (!document.getElementById("imagegallery")) return false;
  var gallery = document.getElementById("imagegallery");
  var links = gallery.getElementsByTagName("a");
  for ( var i=0; i < links.length; i++) {
    links[i].onclick = function() {
      return showPic(this);
    }
  }
}
window.onload=prepareGallery