JavaScript函数无法在外部.js文件中工作

我为JavaScript使用了一个外部.js文件，但我遇到了一个问题，我的HTML无法找到我的任何JavaScript函数。我知道这些函数的工作原理，因为如果我将它从外部文件移动到我的html文件中，它可以正常工作。我在Chrome浏览器的JavaScript控制台中遇到的错误是我的功能没有定义。我也知道，我的外部页面的路径工作，因为我有一些帆布标签阅读JavaScript完美罚款。JavaScript函数无法在外部.js文件中工作

回顾一下，这个工程：

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

    // ... 
};

但下面给我的错误 “未捕获的ReferenceError：的getLocation没有定义”：

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."; 
     } 
    } 
    // ... 
}

这不是一个巨大的问题，因为我可以只保留JavaScript的在我的HTML文件，但它占用了大量的空间，我宁愿保持组织的一切。如果有人知道我可以如何解决这个问题，将不胜感激。

来源

2013-05-04 David Suzuki Moore

您确定在onclick事件被触发之前正在执行JavaScript吗？ – railgun 2013-05-04 00:03:09

@DonovanGlover我发布的所有JavaScript都在'window.onload = function（）{'中，并且我的所有8个canvas标签都正常工作，它只是每次创建函数chrome都会给我未捕获的ReferenceError：getLocation不是定义的错误。 – 2013-05-04 00:14:57

你可以发布你使用的''语法。 – garromark 2013-05-04 00:28:02

由于您在window.onload回调中定义了您的函数，因此getLocation不是全局函数，因此它不会被提供给onclick属性的代码知道。这就是您的浏览器返回undefined的原因。简单的解决方法是将其变成一个全局函数。例如：

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

但是，需要变量和函数进行全局定义的是你要避免对大型项目长期的东西。

您可以通过放弃使用HTML onclick属性从你的主代码中实现这一点，和绑定（非全局）回调：

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."; 
     } 
    }); 
    // ... 
}

来源

2015-01-26 14:09:54

JavaScript函数无法在外部.js文件中工作

回答

相关问题