SOLVED: Inserting html / javascript variable into URL window.location-CodePudding

SOLVED:

Would be so happy if someone could help me out. Im trying to get the longitude and lattitude into the URl. So far I came across many different topics on the internet - but nothing is working. I posting here the html which displays the problem very much. I hope you can help me out

output after clicking the button "Show Position" is showing your position and changing the URL in browser with that longitude and latitude :)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>
    function showPosition() {
        if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                var positionInfo = "Your current position is ("   "Latitude: "   position.coords.latitude   ", "   "Longitude: "   position.coords.longitude   ")";
                document.getElementById("result").innerHTML = positionInfo;
                var longitude = position.coords.longitude;
                var latitude = position.coords.latitude;
                const gotoURL = new URL(window.location.href);
                gotoURL.searchParams.set('longitude', longitude);
                gotoURL.searchParams.set('latitude', latitude);
                window.location.href = gotoURL;
            });
        } else {
            alert("Sorry, your browser does not support HTML5 geolocation.");
        }
    }
</script>
</head>
<body>
    <div id="result">
        <!--Position information will be inserted here-->

        <!--Position information will be inserted here-->
    </div>
    <button type="button" onclick="showPosition();">Show Position</button>
</body>
</html>

CodePudding user response：

There's quiet a few things wrong here... but let's try and get them sorted for you...

Elements don't exist. I'm guessing they previously existed before you posted this on SO. As posted above, they cause Javascript to break.

var long = (document.getElementById('longi').innerHTML = position.coords.longitude);
var lat = (document.getElementById('latti').innerHTML = position.coords.latitude);

You're setting a bunch of (debug?) text and THEN (attempting to) change the URL. If everything works correctly, you'll not see the text, or you'll see it momentarily.
```
var positionInfo = ...
```
When you try and change the location, the variables you're trying to use (longitude and lattitude) don't exist. This is because variables declared inside a function only exist in that function (scope). You can either declare the variables before the callback function, or you can set the window location inside the callback function (this is what I'd recommend).
```
window.location.href = "http://177.0.0.6:5001/?'   longitude   ''   lattitude   '";
```
It's also notable that you're creating the new URL in a weird way, without the search parameters having names - You'd end up with something like 'http://177.0.0.5:5001?23.398208973.89383 - Maybe this is what you're after, but I doubt it.

The easiest way to get it working is remove the line starting with 'window.location.href' and replace the first two lines I mentioned with the following

const gotoURL = new URL(window.location.href);
gotoURL.searchParams.set('longitude', longitude);
gotoURL.searchParams.set('latitude', latitude);
window.location.href = gotoURL;

This takes advantage of the browser's URL builder to make it a little easier to create URLs.

Good luck, and I wish you all the best! ~JD

CodePudding user response：

window.location.href = `http://177.0.0.6:5001/?longitude=${longitude}&latitude=${lattitude}`;

CodePudding user response：

You're mixing up your quotes. Maybe a template string would be easier, making sure that you're assigning those variable values to a URL parameter.

const uri = `http://177.0.0.6:5001/?lng=${longitude}&lat=${lattitude}`;

Oh! You don't have a variable called lattitude.
You can make this easier for yourself by destructuring the properties from the coords object...
```
const { latitude, longitude } = position.coords;
```

...and use those in the template string. And save a bit of code having to repeat things.

So your code might look like this instead.

const result = document.getElementById('result');
const lat = document.getElementById('lat');
const lng = document.getElementById('lng');

navigator.geolocation.getCurrentPosition(function(position) {

  const { latitude, longitude } = position.coords;

  const positionInfo = `Your current position is Latitude: ${latitude}, Longitude: ${longitude}`;

  result.textContext = positionInfo;

  lat.textContent = latitude;
  lng.textContent = longitude;

  const uri = `http://177.0.0.6:5001/?lng=${longitude}&lng=${latitude}`;

});