Q:

Using Javascript to dynamically display a number

This code should generate a page that displays a random number. Why doesn't it work?
<html>
    <head>
        <script type="text/javascript">
            window.onload = generateRandomNumber();
function generateRandomNumber()
{
    var n = 25;
    var number = Math.floor(Math.random()*n)+1;
    document.getElementById("randomNumber").value = number;
}
</script>
    </head>
    <body>
        <h1>
            Random number generated = <h1 id="randomNumber"></h1>
        </h1>
    </body>
</html>

A:

Make use of window.onload. try this
<head>
     <script type="text/javascript">
        window.onload = function(){
             var n = 25;
             var number = Math.floor(Math.random()*n)+1;
             document.getElementById("randomNumber").innerHTML = number;
        };
     </script>
 </head>

fiddle : http://jsfiddle.net/yyAf8/
EDIT as per updated question:
<head>
   <script type="text/javascript">
     window.onload = generateRandomNumber;
     function generateRandomNumber(){
         var n = 25;
         var number = Math.floor(Math.random()*n)+1;
         document.getElementById("randomNumber").innerHTML = number;
        }
  </script>
</head>

fiddle : http://jsfiddle.net/yyAf8/1/
uploading snapshot on demand by OP:

A:

Because in your script you use an element that is not defined yet. Put the script after the element.
Demo: http://jsbin.com/upihez/2

