Javascript/HTML5 Geolocation using external js file

Question

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;    
}

@PrakashChennupati, Indeed it does. But on my server it doesnt at all. Could something on the server be causing this? Working Code: http://bit.ly/Yp0HUZ Non-Working Code (JS in external file): http://bit.ly/10VS7ZU — Salem874, Apr 11 '13 at 13:43
No difference I'm afraid. Also, i used application/javascript as I was under the impression this was the correct mimetype for javascript (http://stackoverflow.com/questions/4101394/javascript-mime-type?answertab=active#tab-top) 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 '13 at 13:58
If you choose to use application/javascript for js in your pages, IE7 and IE8 will not run your script! Blame Microsoft all you want, but if you want most people to run your pages use text/javascript. — Prakash Chennupati, Apr 11 '13 at 14:01
Ah right, I had no idea about that. Thanks for pointing it out. — Salem874, Apr 11 '13 at 14:04

score 0 · Accepted Answer · answered Apr 11 '13 at 13:59

0

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.

answered Apr 11 '13 at 13:59

Ben Felda

1,474
10
15

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 – Salem874 Apr 11 '13 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 '13 at 14:23

score 0 · Answer 2 · answered Nov 24 '13 at 11:35

I had the same problem. Variable x was always null. I think this happened because when you add your external js file to the header, the local variable x is null since the element it refers to has not been created yet.

Try adding

<script type="text/javascript" language="javascript"> x = document.getElementById("demo"); </script>

to the body below the element with the id "demo".

It worked for me!

Javascript/HTML5 Geolocation using external js file

2 Answers2