Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote -1 down vote favorite

I've just started experimenting with Geolocation in web pages.

I've found the useful code snippet on W3Schools (http://www.w3schools.com/html/html5_geolocation.asp) which works.

What I'm a bit perplexed about though, is that IF i put the block (minus the tags) in a separate .js file, call the js file in the of my page, the code doesn't work at all. Why is this?

I'd like to have the final working code in its own .js file tht I can reference from any page.

The js file is in the same folder as the htm/php file

As soon as I revert the script into the body of my page, it works. Could someone help me understand the cause for this please? (If it makes a difference, I'm using Firefox 20

index.php

<!DOCTYPE html>
    <html>
    <head>
    <script type="application/javascript" src="geo.js"></script>

    <title>
        TEST 3: GeoLocation
    </title>
    </head>
    <body>
    <p id="demo">Click the button to get your coordinates:</p>
    <button onclick="getLocation()">Try It</button>
    </body>
</html>

geo.js

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;    
}
share|improve this question
its working for me: jsbin.com/ovabez/1/edit – Prakash Chennupati Apr 11 at 13:27
@PrakashChennupati, Indeed it does. But on my server it doesnt at all. Could something on the server be causing this? Working Code: bit.ly/Yp0HUZ Non-Working Code (JS in external file): bit.ly/10VS7ZU – Salem874 Apr 11 at 13:43
try this change your script tag too : <script type="text/javascript" src="geo.js"></script> – Prakash Chennupati Apr 11 at 13:51
let me know if that worked – Prakash Chennupati Apr 11 at 13:54
No difference I'm afraid. Also, i used application/javascript as I was under the impression this was the correct mimetype for javascript (stackoverflow.com/questions/4101394/…) I'm really baffled as I dont see why it'd work in one and not the other. by the way, did my external JS version (linked to in my comment above work for you? – Salem874 Apr 11 at 13:58
show 2 more comments

1 Answer

up vote 0 down vote accepted

From comment in question: Indeed it does. But on my server it doesnt at all. Could something on the server be causing this? Working Code: bit.ly/Yp0HUZ Non-Working Code (JS in external file): bit.ly/10VS7ZU –

Referencing your links: Your button on your server is missing the id attribute id="btnTryIt". When you try to disable the null object, an exception is thrown and the code execution stops.

share|improve this answer
Good point. Althugh I doubt this is the cause as I'd only added to the "one-file" version after posting here. Having added the id to the <button>, I can confirm it didn't work. Yes, it disabled the button, but nothing else changes. The text doesn't change, neither does any location data appear. – Salem874 Apr 11 at 14:03
There is now another console error on the line past that stating that x is null. Try moving the script to the bottom of the page as demo might not be loaded when you try and retrieve it. – Ben Felda Apr 11 at 14:23
Thanks Ben, that has resolved the problem. – Salem874 Apr 11 at 14:26

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.