web-dev-qa-db-ja.com

関数の外部で初期化されたときにアクセスできない変数

このようなコードを使用すると、正常に機能します。

function removeWarning() {
    var systemStatus = document.getElementById("system-status");
    systemStatus.innerHTML = "";
}

function indicateInvalidUsername() {
    var systemStatus = document.getElementById("system-status");
    systemStatus.innerHTML = "Invalid username";
}

ただし、systemStatusをグローバル変数に移動したい場合は機能しません。

var systemStatus = document.getElementById("system-status");

function removeWarning() {
    systemStatus.innerHTML = "";
}

function indicateInvalidUsername() {
    systemStatus.innerHTML = "Invalid username";
}

ここで何をすることになっていますか？

javascriptglobal-variables
40
Nick Heiner

JavaScriptコードがどこにあるかによります。

この問題はおそらく、行が

var systemStatus = document.getElementById("system-status");

実行されます。 onloadイベントでこれを呼び出すか、理想的にはJavaScriptフレームワークのDOM readyタイプイベントを使用します。

38
MLefrancois

コードブロックの外側の「ルート」レベルで変数を宣言してください。

varを完全に削除することもできますが、それは 推奨されません であり、「strict」をスローします警告。

MDC のドキュメントによると、window.variablenameを使用してグローバル変数を設定できます。

27
Pekka 웃

私の推測では、system-status要素は、変数宣言の実行後に宣言されます。したがって、変数が宣言された時点で、実際にはnullに設定されていますか？

宣言するだけで、代わりにonLoadハンドラーから値を割り当てる必要があります。問題の要素が適切に初期化（ロード）されたことを確認できるからです。

ページの下部に（または少なくともsystem-status要素が宣言されています）が、常に機能するとは限りません。

6
lc.

SystemScopeを外部スコープで宣言し、onloadハンドラーで割り当てます。

systemStatus = null;

function onloadHandler(evt) {
    systemStatus = document.getElementById("....");
}

または、onloadハンドラが必要ない場合は、スクリプトタグをHTMLの下部に配置します。

6
NG.

グローバル変数は、外部JavaScriptファイルで最適に表現されます。

var system_status;

これが他で使用されていないことを確認してください。次に、ページ上の変数にアクセスするには、そのまま変数を参照します。たとえば、テキストボックスに結果を入力したい場合、

document.getElementById("textbox1").value = system_status;

オブジェクトが存在することを確認するには、jQueryのドキュメント対応機能を使用します。

例：

$(function() {
    $("#textbox1")[0].value = system_status;
});
2
Danny G

DOM要素に基づくグローバル変数を定義するには、いくつかのことを確認する必要があります。まず、コードが<head>セクションにある場合、DOMは実行時にロードされません。この場合、次のように、DOMのロード後に変数を設定するためにイベントハンドラーを配置する必要があります。

var systemStatus;
window.onload = function(){ systemStatus = document.getElementById("system_status"); };

ただし、DOMのロード時にこのスクリプトがページ内にインラインである場合は、スクリプトが置かれている場所の上に問題のDOM要素がロードされている限り、実行できます。これは、javascriptが同期的に実行されるためです。これは有効です：

<div id="system_status"></div>
<script type="text/javascript">
 var systemStatus = document.getElementById("system_status");
</script>

後者の例の結果、本文でスクリプトを実行するほとんどのページは、ドキュメントの最後までスクリプトを保存します。これにより、ページが読み込まれ、JavaScriptが実行され、ほとんどの場合、DOMの視覚的に高速なレンダリングが行われます。

2
Travis J