VPF::Объявление глобальных переменных

Coder_D

Дата 18.4.2010, 12:32 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 19
Регистрация: 19.3.2008

Репутация: нет
Всего: нет

Есть код:

Код


   var f1 = document.getElementById('layer').getElementsByClassName('cao')
   var f2 = document.getElementById('layer').getElementsByClassName('zao')
   var f3 = document.getElementById('layer').getElementsByClassName('szao')
   var f4 = document.getElementById('layer').getElementsByClassName('sao')
   
function find_cao() {
      for (var i=0; i<f1.length; i++)
         f1[i].style.fontWeight = "normal";
         
      for (var i=0; i<f2.length; i++)
         f2[i].style.fontWeight = "bolder";
         
      for (var i=0; i<f3.length; i++)
         f3[i].style.fontWeight = "normal";
         
      for (var i=0; i<f4.length; i++)
         f4[i].style.fontWeight = "normal";
   }

Он не работает. А если объявлять каждую переменную перед циклом for, то работает. Почему?

bars80080

Дата 18.4.2010, 13:00 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 44
Всего: 315

видать область видимости разрывается для переменных.

кстати, а где у тебя происходит вызов функции find_cao? перед вызовом эти переменные видны?

IDVsbruck

Дата 18.4.2010, 13:07 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 778
Регистрация: 12.11.2006

Репутация: 7
Всего: 22

Потому что объявление переменных происходит сразу при инициализации содержимого тэга <script>, но элементы c id "layer", "cao", "zao" и прочие еще не определены и не инициализированы, поэтому f1, f2, f3, f4 равны undefined.

Есть некошерный способ (прямолинейный и неправильный) - объявить их после тела страницы. А можно "правильно": там, где они определены сейчас, их просто объявить как var f1, f2, f3, f4, а назначить им значения в обработчике window.onload или body.onload. На крайний случай, определить их в функции find_cao(). При этом они останутся глобальными.

Coder_D

Дата 18.4.2010, 13:07 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 19
Регистрация: 19.3.2008

Репутация: нет
Всего: нет

Вот так выглядит весь тестовый код:

Код


<html>
<head>

<style>
  p {margin:0px;}
</style>

<script>
   var f1 = document.getElementById('layer').getElementsByClassName('cao')
   var f2 = document.getElementById('layer').getElementsByClassName('zao')
   var f3 = document.getElementById('layer').getElementsByClassName('szao')
   var f4 = document.getElementById('layer').getElementsByClassName('sao')
   
function find_cao() {
      for (var i=0; i<f1.length; i++)
         f1[i].style.fontWeight = "normal";
         
      for (var i=0; i<f2.length; i++)
         f2[i].style.fontWeight = "bolder";
         
      for (var i=0; i<f3.length; i++)
         f3[i].style.fontWeight = "normal";
         
      for (var i=0; i<f4.length; i++)
         f4[i].style.fontWeight = "normal";
   }
   
   
   function sel_func(self) {
  selNum = self.okrug.selectedIndex;
    if (selNum == 0) {find_null();}
      else if (selNum == 1) {find_cao();}
      else if (selNum == 2) {find_zao();}
      else if (selNum == 3) {find_szao();}
      else if (selNum == 4) {find_sao();}
   }
</script>

</head>
<body>

  <form style="margin-left: 100px;">
  <select name="okrug" onchange="sel_func(this.form)">
  <option selected>Сделайте выбор</option>
  <option value="cao">Удалить 1</option>
  <option value="zao">Удалить 2</option>
  <option value="szao">Удалить 3</option>
  <option value="sao">Удалить 4</option>
  </select>
  </form>
  
<div id="layer" style="padding-top: 20px; padding-left: 40px;">
  <p class="cao">100</p>
  <p class="zao">110</p>
  <p class="szao">120</p>
  <p class="sao">130</p>
  <p class="cao">140</p>
  <p class="zao">150</p>
  <p class="szao">160</p>
  <p class="sao">170</p>
</div>

</body>
</html>

bars80080

Дата 18.4.2010, 13:37 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 44
Всего: 315

Coder_D, проблему и решение полностью расписана в посте IDVsbruck`а

Coder_D

Дата 18.4.2010, 15:50 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 19
Регистрация: 19.3.2008

Репутация: нет
Всего: нет

Цитата(IDVsbruck @ 18.4.2010, 13:07

)

а назначить им значения в обработчике window.onload или body.onload

Подскажите, как это сделать?

IDVsbruck

Дата 18.4.2010, 16:27 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 778
Регистрация: 12.11.2006

Репутация: 7
Всего: 22

В скриптах добавляешь обработчик:

Код

window.onload = function() {
    f1 = ...;
    f2 = ...;
    ...
}

Вроде так, уже и забыл - перешел давно на jQuery, там это как непрописная истина smile

А можно и так:

Код

<script type="text/javascript">
    ...
    function init() {
        f1 = ...;
        f2 = ...;
        ...
    }
...
</script>
...
<body onload="init()">
...

Coder_D

Дата 18.4.2010, 16:36 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 19
Регистрация: 19.3.2008

Репутация: нет
Всего: нет

IDVsbruck, Спасибо большое! Всё работает! smile

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »