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:

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:
var x=document.getElementById("demo");
var y="test";
var r=x.className;
function getLocation()
  if (navigator.geolocation)
  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;	
<p id="demo" class="first">Click the button to get your coordinates:</p>
<button onclick="getLocation()">Try It</button>