Html 5 clock, part ii - CSS marker classes and getElementsByClassName
- by Norgean
The clock I made in part i displays the time in "long" - "It's a quarter to ten" (but in Norwegian). To save space, some letters are shared, "sevenineight" is four letters shorter than "seven nine eight". We only want to highlight the "correct" parts of this, for example "sevenineight". When I started programming the clock, each letter had its own unique ID, and my script would "get" each element individually, and highlight / hide each element according to some obscure logic. I quickly realized, despite being in a post surgery haze, …this is a stupid way to do it. And, to paraphrase NPH, if you find yourself doing something stupid, stop, and be awesome instead. We want an easy way to get all the items we want to highlight. Perhaps we can use the new getElementsByClassName function? Try to mark each element with a classname or two. So in "sevenineight": 's' is marked as 'h7', and the first 'n' is marked with both 'h7' and 'h9' (h for hour). <div class='h7 h9'>N</div><div class='h9'>I</div> getElementsByClassName('h9') will return the four letters of "nine". Notice that these classes are not backed by any CSS, they only appear directly in html (and are used in javascript). I have not seen classes used this way elsewhere, and have chosen to call them "marker classes" - similar to marker interfaces - until somebody comes up with a better name.
