Как определить глобальную переменную в JavaScript, к которой можно получить доступ во всех функциях - PullRequest
Новая
       2

Как определить глобальную переменную в JavaScript, к которой можно получить доступ во всех функциях

4 голосов
/ 17 января 2012

Вот пример формы: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Sample form</title>
<script type="text/javascript">
function displayResult() {
alert(document.myForm.myInput.value);
}
function getFocus() {
  if (document.myForm.myInput.value == document.myForm.myInput.defaultValue) {
    document.myForm.myInput.value = "";
  }
}
function loseFocus() {
  if (document.myForm.myInput.value == "") {
    document.myForm.myInput.value = document.myForm.myInput.defaultValue;
  }
}
</script>
</head>
<body>
    <form name="myForm" method="get" onsubmit="return false;" action="">
        <input name="myInput" value="Hello world!" onfocus="getFocus();" onblur="loseFocus();"><br>
        <input type="button" onclick="displayResult();" value="Display input value">
    </form>
</body>
</html>

Работает без проблем, но следующее не работает, хотя переменная x кажется правильной: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Sample form</title>
<script type="text/javascript">
var x = document.myForm.myInput;
function displayResult() {
alert(x.value);
}
function getFocus() {
  if (x.value == x.defaultValue) {
    x.value = "";
  }
}
function loseFocus() {
  if (x.value == "") {
    x.value = x.defaultValue;
  }
}
</script>
</head>
<body>
    <form name="myForm" method="get" onsubmit="return false;" action="">
        <input name="myInput" value="Hello world!" onfocus="getFocus();" onblur="loseFocus();"><br>
        <input type="button" onclick="displayResult();" value="Display input value">
    </form>
</body>
</html>

Что с ним не так и как я могу определить глобальную переменную, которая будет использоваться всеми функциями?

Ответы [ 4 ]

7 голосов
/ 17 января 2012

Чтобы сделать переменную видимой во всех областях, вы должны объявить ее в самой глобальной области видимости: 

<script>
    var variableName;
</script>

или вы можете прикрепить его к глобальному контексту (окну): 

window['variableName'] = value;

Ваш код не работает из-за того, что при определении x форма недоступна, что означает, что вы ничего не присваиваете переменной.
Вы должны обернуть свою инициализацию в обработчик событий для события onload: 

window.onload = function(){
    window.x = document.myForm.myInput;
};

или 

var x;
window.onload = function(){
    x = document.myForm.myInput;
};
3 голосов
/ 17 января 2012

Ваша переменная x получает значение document.myForm.myInput до того, как DOM будет готов. Вы можете поместить сценарий после того, как ваша форма и элементы myInput были объявлены, настроить запуск сценария в событии onload или использовать jQuery для поддержки готовности документов (доступны другие библиотеки js, предлагающие аналогичную поддержку).

Вариант 1: 

<body>
  <form name="myForm">
    <input name="myInput"> ...
  </form>
  <script>
    ...
  </script>
</body>

Вариант 2: 

window.onload = function(){
  var x = document.myForm.myInput;
  ...
};

Вариант 3: 

(function($) {
   $(function() {
     var x = document.myForm.myInput;
     ...
   });
}(window.jQuery));
1 голос
/ 17 января 2012

Ваш код JavaScript выполняется до загрузки остальной части документа.Попробуйте поместить его в конец, или рассмотрите возможность использования события onLoad body, или, если вы хотите использовать библиотеку, такую ​​как jQuery, вы можете использовать событие ready.

0 голосов
/ 17 января 2012

Если вы поместите весь контент <script> в событие load или domready, оно должно работать. В качестве альтернативы вы можете поместить весь тег <script> внизу веб-сайта (прямо перед закрытием </body> - тега

).
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...