JavaScript to php Error [object HTMLParagraphElement]

JavaScript Geolocation function for php giving Error [object HTMLParagraphElement]

<p id="demo"></p>

    <script>

        var notsupported = document.getElementById("demo");
        if (navigator.geolocation) {
    	navigator.geolocation.getCurrentPosition(showPosition);
        } else {
    	notsupported.innerHTML = "Geolocation is not supported by this browser.";
        }
        function showPosition(position) {
    	brazil.innerHTML = +position.coords.latitude;
        }
        createCookie("australianbrother", brazil, "1");

        function createCookie(name, value, days) {
    	var expires;

    	if (days) {
    	    var date = new Date();
    	    date.setTime(date.getTime() + (days * 24 * 60 * 60));
    	    expires = "; expires=" + date.toGMTString();
    	} else {
    	    expires = "";
    	}

    	document.cookie = escape(name) + "=" +
    		escape(value) + expires + "; path=/";
        }
    </script>
    <?php

    $helpbrother = $_COOKIE["australianbrother"];
    echo $helpbrother;

Seems like you’re mixing your metaphors…where is brazil (for brazil.innerHTML) defined?

Thanks for answering. Could you make an example?

That doesn’t make sense in regard to what you were being asked.

When JavaScript has an unknown variable, it will look for an HTML element with a matching id.

<div id="brazil"></div>

It is a better practice these days to explicitly retrieve the element instead:

var brazil = document.querySelector("#brazil");
brazil.innerHTML = +position.coords.latitude;
1 Like

/me waves his magic wand

Sure thing

I suspect that the code was inspired from the following post: https://forum.bubble.io/t/known-issue-geolocation-timing-out-in-chrome-65/26304/2

<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>

<script>
var x = document.getElementById("demo");

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

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

Here is an example of that code working: https://jsfiddle.net/3a0q8wzu/

1 Like

Thanks for answering. Could you try to solve my problem?

Yes, done and done.

There are though improvements that I would make to the code.

Move event handler to JavaScript

I would remove the inline HTML event and explicitly move that to the JavaScript instead:

<!--
<button onclick="getLocation()">Try It</button>
-->
<button>Try It</button>
function buttonClickHandler() {
    getLocation();
}

var button = document.querySelector("button");
button.addEventListener("click", buttonClickHandler);

Fix bad variable name

That’s also a bad variable name, so I’m renaming it to a better one of locationResult.

// var x = document.querySelector("#demo");
var locationResult = document.querySelector("#demo");
...
    // x.innerHTML = "Latitude: " + position.coords.latitude + 
    // "<br>Longitude: " + position.coords.longitude;
    locationResult.innerHTML = "Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude;
...
        // x.innerHTML = "Geolocation is not supported by this browser.";
        locationResult.innerHTML = "Geolocation is not supported by this browser.";
...

I’m going to use a code linter to help me find other obvious things to fix.

Fix long line

The showPosition function has a very long line in it that needs to be shortened.

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

There’s also a long line in the getLocation function, that can be fixed, by removing the else clause and using an early return.

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

Remove global variables

And lastly, I want to wrap the code in an IIFE (immediately invoked function expression) to help protect the global namespace from the locationResult global variable.

Ahh no, but that indents the code further, resulting in another line being too long. It’s time to fix that.

Extract to a separate function

Let’s use a separate function called unsupportedGeolocation, and simplify things by using the else clause again:

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

Simplify getCurrentPosition

Can I simplify that getCurrentPosition line? Here’s what I want both parts of the if/else clause to be a function call:

    function unsupportedGeolocation(el) {
        el.innerHTML = "Geolocation is not supported by this browser.";
    }
    function getLocation() {
        if (navigator.geolocation) {
            showLocation(locationResult);
        } else {
            unsupportedGeolocation(locationResult);
        }
    }

That locationResult function then looks like this:

function showLocation(el) {
    navigator.geolocation.getCurrentPosition(showPosition);
}

But we have a mystery showPosition variable in there. We can just move the showPosition function inside of the showLocation function, and things end up making sense again.

removing global locationResult

The locationResult variable is used in only one place now, in the getLocation function, which is called from the buttonClickHandler function. That handler function is a good place to put configurable information, so I’ll move locationResult into that handler function.

    function getLocation() {
    function getLocation(locationResult) {
        ...
    }
    function buttonClickHandler() {
        var locationResult = document.querySelector("#demo");
        // getLocation();
        getLocation(locationResult);
    }

Summary

Is that code better? There’s a showLocation and unknownGeolocation function, that are each used from the getLocation function, which is called from the buttonClickHandler function.

That’s a nice and simple structure that makes a lot of sense now.

(function iife() {
    function showLocation(el) {
        function showPosition(position) {
            el.innerHTML = (
                "Latitude: " + position.coords.latitude + "<br>" +
                "Longitude: " + position.coords.longitude
            );
        }
        navigator.geolocation.getCurrentPosition(showPosition);
    }

    function unsupportedGeolocation(el) {
        el.innerHTML = "Geolocation is not supported by this browser.";
    }

    function getLocation() {
        if (navigator.geolocation) {
            showLocation(locationResult);
        } else {
            unsupportedGeolocation(locationResult);
        }
    }

    function buttonClickHandler() {
        var locationResult = document.querySelector("#demo");
        getLocation(locationResult);
    }

    var button = document.querySelector("button");
    button.addEventListener("click", buttonClickHandler);
}());

The updated code is found at https://jsfiddle.net/ftszj67n/

2 Likes

I knew that, but it wasn’t in the sample code he provided :wink:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.