Переменная недоступна при инициализации внешней функции

Когда я использую такой код, он отлично работает:

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

Что я должен делать здесь?

Ответ 1

Это действительно зависит от того, где находится ваш код JavaScript.

Проблема, вероятно, связана с тем, что DOM не загружается, когда строка

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

Выполняется

. Вы можете попробовать называть это в событии onload или в идеале использовать событие типа готовности DOM из фреймворка JavaScript.

Ответ 2

Убедитесь, что вы указали переменную на уровне "root", вне любых кодовых блоков.

Вы также можете удалить var вообще, хотя это не рекомендуется и будет вызывать "строгую msgstr" предупреждение.

В соответствии с документацией в MDC вы можете установить глобальные переменные, используя window.variablename.

Ответ 3

Я предполагаю, что элемент system-status объявлен после запуска объявления переменной. Таким образом, во время объявления переменной она фактически устанавливается в нуль?

Вы должны объявить это только, а затем назначьте его значение из обработчика onLoad, потому что тогда вы будете уверены, что он правильно инициализировал (загрузил) этот элемент.

Вы также можете попробовать поместить script в нижней части страницы (или, по крайней мере, где-нибудь после объявления элемента system-status), но он не гарантирует, что он всегда будет работать.

Ответ 4

Объявить systemStatus во внешней области и назначить его в обработчике onload.

systemStatus = null;

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

Или, если вы не хотите обработчик onload, поместите тэг script в нижней части вашего HTML.

Ответ 5

Эта статья является ответом на такие проблемы!;) Прочтите внимательно!

Ответ 6

Глобальная переменная будет лучше всего выражена во внешнем файле JavaScript:

var system_status;

Убедитесь, что это не использовалось нигде. Затем, чтобы получить доступ к переменной на вашей странице, просто укажите ее как таковую. Скажем, например, вы хотели заполнить результаты в текстовом поле,

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

Чтобы убедиться, что объект существует, используйте функцию готовности документа jQuery.

Пример:

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

Ответ 7

Чтобы определить глобальную переменную, основанную на элементе DOM, необходимо проверить несколько вещей. Во-первых, если код находится в разделе <head>, то DOM не будет загружен при выполнении. В этом случае для установки переменной после загрузки DOM должен быть помещен обработчик событий, например:

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

Однако, если этот script является встроенным в страницу с загрузкой DOM, то это можно сделать, если элемент DOM загружен выше, где находится script. Это связано с тем, что javascript выполняется синхронно. Это было бы верно:

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

В результате последнего примера большинство страниц, которые запускают скрипты в теле, сохраняют их до самого конца документа. Это позволит загружать страницу, а затем выполнить javascript, который в большинстве случаев вызывает визуально более быстрый рендеринг DOM.