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文件中工作

回答

相關問題