Глобальные переменные Javascript не работают должным образом. Помогите? - PullRequest
5 голосов
/ 26 ноября 2011

Я новичок в Javascript. Я столкнулся с проблемой с глобальными переменными. Я не могу понять, почему глобальные переменные не работают, так как код выглядит нормально. Пожалуйста, помогите мне решить эту проблему. Сначала я кратко объясню код. У меня есть текст на странице, который при нажатии изменяется на текстовое поле. Когда я определяю переменные внутри тела функции, код начинает работать нормально. Когда эти переменные определены глобально, как в следующем коде, консоль отображает эту ошибку: переменная не определена. Вот мой код:

<!DOCTYPE HTML>
<html>
<head>
<title>Span to Text Box - Demo - DOM</title>
<script type="text/javascript" language="javascript">
var textNode = document.getElementById('text');
var textValue = textNode.firstChild.nodeValue;
var textboxNode = document.getElementById('textbox');
var doneButton = document.getElementById('done');
function change()
{
   textboxNode.setAttribute('value', textValue);
   textNode.style.display = 'none';
   textboxNode.setAttribute('type','text');
   doneButton.setAttribute('type','button');
}
function changeBack()
{
   textNode.firstChild.nodeValue = textboxNode.value;
   textNode.style.display = 'block';
   textboxNode.setAttribute('type', 'hidden');
   doneButton.setAttribute('type','hidden');
}
</script>
</head>

<body>
<p id="text" onClick="change()">Click me!</p>
<form onSubmit="return false;">
  <input type="hidden" id="textbox" />
  <input type="hidden" id="done" onClick="changeBack()" value="Done" />
</form>
</body>
</html>

Пожалуйста, помогите! Заранее спасибо.

Ответы [ 2 ]

3 голосов
/ 26 ноября 2011

Как сказал Адам, проблема в том, что вы запускаете javascript в документе до его загрузки. Есть несколько способов исправить это, но самый простой - просто переместить ваш код javascript в конец тела, чтобы документ уже был проанализирован и готов, прежде чем ваш код будет работать следующим образом:

<!DOCTYPE HTML>
<html>
<head>
<title>Span to Text Box - Demo - DOM</title>
</head>

<body>
<p id="text" onClick="change()">Click me!</p>
<form onSubmit="return false;">
  <input type="hidden" id="textbox" />
  <input type="hidden" id="done" onClick="changeBack()" value="Done" />
</form>

<script type="text/javascript" language="javascript">
var textNode = document.getElementById('text');
var textValue = textNode.firstChild.nodeValue;
var textboxNode = document.getElementById('textbox');
var doneButton = document.getElementById('done');
function change()
{
   textboxNode.setAttribute('value', textValue);
   textNode.style.display = 'none';
   textboxNode.setAttribute('type','text');
   doneButton.setAttribute('type','button');
}
function changeBack()
{
   textNode.firstChild.nodeValue = textboxNode.value;
   textNode.style.display = 'block';
   textboxNode.setAttribute('type', 'hidden');
   doneButton.setAttribute('type','hidden');
}
</script>

</body>
</html>
2 голосов
/ 26 ноября 2011

Ошибка, вероятно, вызвана захватом узлов DOM до того, как они будут готовы:

var textNode = document.getElementById('text');

Вероятно, это возвращает либо null, либо undefined, поскольку этот элемент DOM еще не создан.

Поместите этот скрипт в конец вашего тела , чтобы решить вашу проблему.

Или, если вы хотите использовать jQuery, вы можете сделать все это в

$(document).ready(function() {
    var textNode = document.getElementById('text');
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...