Question on where to place script - works at bottom, does not work at the top.

Question on where to place script - works at bottom, does not work at the top.

I have 2 jsfiddles that have the same code, just one places the script at the top of the html and one places the same script at the bottom of the html.

http://jsfiddle.net/k1Lxabh1/  <---  script at top, does not work.
http://jsfiddle.net/kzm4kasb/  <--- script at bottom, works.


So my question is why? I think this has something to do with the onLoad vs onDomready, but I'm not sure.


Note if I take the <script> out of the html and place it in the javaScript section of jsfiddle it works--- as long as I use onLoad or onDomready, but not if I use no wrap - in <head> or no wrap - in <body>

Thanks!!
Neville