7

JavaScript に外部の .js ファイルを使用していましたが、HTML で JavaScript 関数が見つからないという問題が発生しました。外部ファイルからhtmlファイルに移動すると正常に機能するため、機能が機能することはわかっています。Chrome の JavaScript コンソールに表示されるエラーは、関数が定義されていないというものです。また、JavaScript を完全に正常に読み取るキャンバス タグがいくつかあるため、外部ページへのパスが機能することもわかっています。

要約すると、これは機能します：

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

    // ...
};

しかし、次のようにすると、「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.";
        }
    }
    // ...
}

JavaScript を HTML ファイルに保持できるので大きな問題ではありませんが、多くのスペースを占有するため、すべてを整理しておきたいと考えています。この問題を解決する方法を誰かが知っていれば、それは大歓迎です。

4

1 に答える 1

2

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-26T14:09:54.637 に答える