title: Javascript functions not working in external .js file
body: <p>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.</p>
  
  <p>To recap, this works:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;canvas id="Canvas7"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>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);
  
      // ...
  };
  </code></pre>
  
  <p>But the following gives me the error "Uncaught ReferenceError: getLocation is not defined":</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;button onclick="getLocation()"&gt;Click here&lt;/button&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>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.";
          }
      }
      // ...
  }
  </code></pre>
  
  <p>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. </p>