0

Доброго ночи!

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

Javascript:

var planetList = new Array();
  planetList[0] = 'Меркурий';
  planetList[1] = 'Венера';
  planetList[2] = 'Земля';
  planetList[3] = 'Марс';

var wayToSun = new Array();
  wayToSun[0] = '52 млн.км';
  wayToSun[1] = '108 млн.км';
  wayToSun[2] = '149 млн.км';
  wayToSun[3] = '228 млн.км';

var planetDiameter = new Array();
  planetDiameter[0] = '4 880 км';
  planetDiameter[1] = '12 100 км';
  planetDiameter[2] = '12 750 км';
  planetDiameter[3] = '6 800 км';

function doCount(){
   var userText = document.getElementById('planetName').value;
   for( var i = 0; i < planetList.length; i++) {
     if(planetList[i] == userText){
        break;
     }
   }
document.write('<p class="hightlight">'+planetList[i]+'</p>');
document.write('<p class="hightlight">Расстояние до солнца: '+wayToSun[i]+'</p>');
document.write('<p class="hightlight">Диаметр планеты: '+planetDiameter[i]+'</p>');
}

HTML:

<label for="planetName">Введите название планеты:</label>
<input type="text" id="planetName" name="planetName" />
<input type="button" id="counter" value="Рассчитать" onclick="doCount()"/>

Как я и говорил всё до банальности просто, мат.часть так скажем. Но вот ситуацию почему скрипт перестаёт "работать", когда переменная userText объявляется вне тела функции (если я всё правильно понимаю, в таком случае она является глобальной), я никак не могу осилить.

3
  • А вне тела функции она существует? Не создается ли в каком-нибудь замыкании? Попробуйте явно присваивать ее объекту window: window.userText = document.getElementById('planetName').value; var foo = window.userText;
    – neoascetic
    24 апр 2012 в 23:32
  • В том и дело. если вне тела функции объявлять, то её значение равно null. в этом и есть непонятный момент. по моей идее она должна быть глобальной и быть доступной функции.
    – LeD4eG
    24 апр 2012 в 23:44
  • Хм, null или все же undefined? Создайте jsfiddle, посмотрим.
    – neoascetic
    25 апр 2012 в 0:08

2 ответа 2

2

Значение input нам нужно после нажатия на кнопку, верно? Ее не нужно получать заранее, в этом нет смысла. Дело даже не в DOM, как я написал сперва (удалять ту часть ответа не буду, вдруг пригодится).


Сравните два фиддла: определение переменной внутри функции и снаружи. (Для обработки события onclick была заюзана jQuery из-за траблов с iframeами, но на конечный результат это никак не влияет).

В первом варианте мы делаем выборку нужного элемента после клика на клавишу, когда дерево DOM уже построено (и этот элемент присутствует в документе).

Во втором - мы выбираем элемент сразу же, не смотря на то, что, возможно, он еще не присутствует в DOM, что и дает нам значение undefined.

То есть - необходимо дождаться, когда нужный элемент будет доступен в DOM, после этого только делать выборку. Варианты:

  • дождаться события document.ready (предпочтительный)
  • перенести JS в конец страницы (ну или хотя бы вставить его после объявления нужного html-элемента
3
  • нет-нет-нет, так пойдёт) Первая часть Вашего ответа - это и есть тескстовая часть моего вопроса) я именно так и "игрался" с расположением переменной userText (объявлял её вне тела функции и в нём), так что fiddle Ваши показали мне то, что я уже видел). Но Вы мне помогли разобраться с этой проблемой. за это плюсую!)
    – LeD4eG
    25 апр 2012 в 0:40
  • Я не понимаю... А была ли проблема?
    – neoascetic
    25 апр 2012 в 0:43
  • была!)был не понятен механизм, но с Вами я достаточно быстро разобрался в происходящем)спасибо!
    – LeD4eG
    25 апр 2012 в 1:38
1

Pre-scriptum Данный ответ пишу, дабы поведать, что я понял и попытаться донести это до человека, которого будет интересовать нечто подобное.

Дело тут не в области видимости (в этом я был абсолютно не прав), а в событиях!на самом деле для инициализации переменной userText должно произойти какое-либо событие. Добавим простую функцию, которая будет "забирать" значение поля до нажатия кнопки:

Javascript

function getText(){
   userText = document.getElementById('planetName').value;
}

Вот и всё. теперь можно объявлять переменную до тела всех функций, в которых она используется, размещать сам скрипт в любой части страницы (@neoascetic так и писал).

А проблема, указанная мной в вопросе, происходила не потому что элемент не существовал в дереве DOM (точнее, не только из-за этого, позднее поясню). Вот поэтому изначально в значение переменной userText и попадало значение undefined, а так как изменение переменной никак не отслеживалось, то и возникала эта проблема (но это я опять возвращаюсь в события). Цикл должен вернуть значение i для определения совпадения введённого пользователем строки с элементами массива, совпадения нет - получаем i==undefined. Вот в чём суть.

Но окончание построения дерева DOM играет всё-таки свою роль. Если изначально значение атрибуту value текстового поля, строка: (вне тела функции doCount())

var userText = document.getElementById('planetName').value;

тоже будет присваивать значение null переменной. Но если написать следующее до указанной выше функции:

var userText;
function getValue(){
    userText = document.getElementById('planetName').value;
}

и вызвать эту функцию после создания текстового поля (разместить тег <script> с вызовом функции getValue() после соответствующего input, то всё опять-таки будет работать. Получаем глобальную переменную, которая инициализируется значением, заданным по умолчанию и которая потом передаётся в цикл для поиска совпадений.

Вот такая, на первый взгляд, простая задачка из матчасти, но с подводными камнями. Я надеюсь, у меня получилось описать суть проблемы достаточно подробно и наглядно.

4
  • Не null, а undefined.
    – neoascetic
    25 апр 2012 в 1:39
  • Да, Вы вполне правы, ведь элемент на момент инициализации ещё не существует.
    – LeD4eG
    25 апр 2012 в 1:54
  • Но лучше юзать jQuery, document.ready и получать удовольствие от программирования
    – neoascetic
    25 апр 2012 в 2:19
  • да, я знаю. цель выучить именно javascript.
    – LeD4eG
    25 апр 2012 в 9:26

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.