I was using an external .js file for my JavaScript but I have encountered a problem with my HTML not being able to find any of my JavaScript functions. I know the functions work because if I move it from the external file to my html file it works fine. The error I get in the JavaScript console on Chrome is that my functions are not defined. I also know that my path to my external page works because I have some canvas tags that are reading the JavaScript perfectly fine.

To recap, this works:

HTML:

<canvas id="Canvas7"></canvas>

JavaScript:

window.onload = function() {
    var g=document.getElementById("Canvas7");
    var ctx=g.getContext("2d");
    var grd=ctx.createRadialGradient(75,50,5,90,60,100);
    grd.addColorStop(0,"red");
    grd.addColorStop(1,"white");
    ctx.fillStyle=grd;
    ctx.fillRect(10,10,150,80);

    // ...
};

But the following gives me the error "Uncaught ReferenceError: getLocation is not defined":

HTML:

<button onclick="getLocation()">Click here</button>

JavaScript:

window.onload = function() {
    var x=document.getElementById("location");
    function getLocation(){
        if (navigator.getlocation){
            navigator.getlocation.getCurrentPosition(showPosition,showError);
        }
        else{
            x.innerHTML="GeoLocation is not supported by this browser.";
        }
    }
    // ...
}

It's not a huge issue since I can just keep the JavaScript in my HTML file but it takes up a lot of space and I would prefer to keep everything organized. If anyone knows how I could solve this issue it would be much appreciated.

I was using an external .js file for my JavaScript but I have encountered a problem with my HTML not being able to find any of my JavaScript functions. I know the functions work because if I move it from the external file to my html file it works fine. The error I get in the JavaScript console on Chrome is that my functions are not defined. I also know that my path to my external page works because I have some canvas tags that are reading the JavaScript perfectly fine.

To recap, this works:

HTML:

<canvas id="Canvas7"></canvas>

JavaScript:

window.onload = function() {
    var g=document.getElementById("Canvas7");
    var ctx=g.getContext("2d");
    var grd=ctx.createRadialGradient(75,50,5,90,60,100);
    grd.addColorStop(0,"red");
    grd.addColorStop(1,"white");
    ctx.fillStyle=grd;
    ctx.fillRect(10,10,150,80);

    // ...
};

But the following gives me the error "Uncaught ReferenceError: getLocation is not defined":

HTML:

<button onclick="getLocation()">Click here</button>

JavaScript:

window.onload = function() {
    var x=document.getElementById("location");
    function getLocation(){
        if (navigator.getlocation){
            navigator.getlocation.getCurrentPosition(showPosition,showError);
        }
        else{
            x.innerHTML="GeoLocation is not supported by this browser.";
        }
    }
    // ...
}

It's not a huge issue since I can just keep the JavaScript in my HTML file but it takes up a lot of space and I would prefer to keep everything organized. If anyone knows how I could solve this issue it would be much appreciated.

• javascript
• html
• function

• Are you sure that the JavaScript is being executed before the onclick event is fired? – user1585455 Commented May 4, 2013 at 0:03
• @DonovanGlover All the Javascript I posted is inside 'window.onload = function() {' and the javascript for all 8 of my canvas tags work correctly its just every time I create a function chrome gives me the Uncaught ReferenceError: getLocation is not defined error. – David Suzuki Moore Commented May 4, 2013 at 0:14
• Can you post the <script> tag syntax you used that has the path to the external javascript file? Just as a reminder, with the Javascript in an external file, you'll need to load the javascript onto the page before the click event is fired through the use of <script type="text\javascript" src="\path\to\script.js"></script> syntax. – garromark Commented May 4, 2013 at 0:28
• @DavidSuzukiMoore That is not a global function, hence why your browser returned undefined. You need to make it a global function by using e.g: window.getLocation = function() { ... } instead. – user1585455 Commented May 4, 2013 at 0:37
• @garromark the script tag is <script type="text/javascript" src="test.js"></script> The .js file is in the same directory folder as the .html and .css file. – David Suzuki Moore Commented May 4, 2013 at 0:50

1 Answer 1

As you have defined your function(s) within the window.onload callback, getLocation is not a global function, so it is not known to the code provided to the onclick attribute. This is why your browser returned undefined. The easy fix is to make it a global function instead. For example:

window.getLocation = function() { ... }

However, requiring variables and functions to be defined globally is something you'll want to avoid long term on larger projects.

You can achieve this, by abandoning the use of HTML onclick attributes, and bind (non-global) callbacks from within your main code:

HTML:

<button id="getloc">Click here</button>

JavaScript:

document.addEventListener("DOMContentLoaded", function() {
    var x = document.getElementById("location");

    getloc.addEventListener("click", function() {
        if (navigator.getlocation){
            navigator.getlocation.getCurrentPosition(showPosition,showError);
        }
        else{
            x.textContent = "GeoLocation is not supported by this browser.";
        }
    });
    // ...
}