Html – JS Alert on pageload

Assuming the code executes without error (you haven’t specified)… This should be successfully alerting "Your location is:undefined":

alert("Your location is:" + getLocation());

Because getLocation doesn’t return anything. Since the information you’re looking for is asynchronous, it only exists in or after a given callback operation. That callback operation (the function where the values you want exist) is:

function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude;
}

So that’s where you’d add your alert. For example:

function showPosition(position) {
  const result = "Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude;

  x.innerHTML = result;
  alert(result);
}

Using your original example below…

NOTES:

1. I am not making this a runnable Stack Snippet because geolocation is disabled there. It appears to work on CodePen though.
2. I also had to define x. Which I assume you’d defined elsewhere in your code. Otherwise what would you expect it to be and why? And surely the browser would be producing an error on the console?

<script>
  const x = {}; // Whatever x is in your code isn't necessary in this example

  function getLocation() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition);
    } else { 
      x.innerHTML = "Geolocation is not supported by this browser.";
    }
  }

  function showPosition(position) {
    const result = "Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude;

    x.innerHTML = result;
    alert(result);
  }

  getLocation();
</script>