Please see the code below.
Why is y passed on to the showPositionfunction while x appears as null ?

I am using the w3schools script like here: http://www.w3schools.com/html/tryit....l5_geolocation

but instead of placing <script> after the html element I include them in the head.

The weird thing is that if I insert variable x as a local variable in the showPosition function the script works.
That is how I ruled out the possible issue of page not having loaded before changing x's[ B]innerHTML[/B]

Code JavaScript:
<head>
<script>
var x=document.getElementById("demo");
var y="test";
var r=x.className;
 
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
 
function showPosition(position)
  {
  alert (y + r);
  x.innerHTML="Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude;	
  }
 
 
</script>
</head>
<body>
 
<p id="demo" class="first">Click the button to get your coordinates:</p>
<button onclick="getLocation()">Try It</button>
 
</body