2011-01-08 3 views
3

Я не могу за жизнь мне понять, почему это не работает:Почему этот Javascript не работает? Изменение стиля

JavaScript:

//==================================// 
// resize_middle       // 
//----------------------------------// 
// Resizes the content and left  // 
// navigation div to make up the  // 
// remains of available space.  // 
//==================================// 
function resize_middle() 
{ 
    min_height = (window.innerHeight - 276) + "px"; 
    middle_left = document.getElementById("middle_left"); 
    middle_right = document.getElementById("middle_right"); 
    alert("its not going to work!"); 
    alert("here goes..."); 
    alert(min_height); 
    middle_left.style.minHeight = min_height; 
    alert("it works!"); 
    middle_right.style.minHeight = min_height; 
} 
//==================================// 
// event handlers       // 
//==================================// 
window.onload = resize_middle(); 
window.onresize = resize_middle(); 

HTML (тело & Javascript немного в голове показано только):

<script src="javascript.js" type="text/javascript" charset="utf-8"></script> 
<body> 
    <div id="container"> 
     <div id="central_column"> 
      <div id="top_left"> 
       <img src="./images/icon.png" alt="icon" style="width:100%;height:auto;" /> 
      </div> 
      <div id="top_right"> 
       top right 
      </div> 
      <div id="middle_left"> 
       middle left 
      </div> 
      <div id="middle_right"> 
       middle right 
      </div> 
      <div id="bottom"> 
       bottom 
      </div> 
     </div> 
    </div> 
</body> 

Я использовал это раньше и имею рабочую копию некоторого немного другого кода, но он отлично работает. Я получаю уведомления об отладке до тех пор, пока «он не будет работать!», Который я не получаю. Спасибо заранее, ell.

+1

'/ * комментарии в свободной форме \ nvery полезные они * /' – delnan

+2

Я ** настоятельно рекомендую использовать правильный отладчик для JavaScript, например [Firebug] (http://getfirebug.com) для Firefox. –

ответ

6

Вы должны вместо этого:

window.onload = resize_middle; 
window.onresize = resize_middle; 

Потому что, как иметь его resize_middle() функция обрабатывается немедленно и результат добавляется к событию. Вы хотите, чтобы сама функция была добавлена ​​к событию, поэтому вы не включаете(), если ваша функция не возвращает функцию для использования события.

+0

Спасибо! Мне так глупо! – Ell

+0

Улавливает всех, по крайней мере, один раз – Kurru

4

Вы должны вместо этого:

window.onload = resize_middle; 
window.onresize = resize_middle; 

В настоящее время вы вызова эти функции и назначение их возвращаемое значение события. Вы хотите назначить функции самим событиям, и пусть события назовут их.


Примечание стороны:

Если только переменные в resize_middle определена в другом месте, и вы собираетесь, чтобы они были доступны для внешней области видимости, это хорошая практика, чтобы использовать var ключевое слово при определении новых переменных ,

function resize_middle() 
{ 
     // Changed to use "var" 
    var min_height = (window.innerHeight - 276) + "px"; 
    var middle_left = document.getElementById("middle_left"); 
    var middle_right = document.getElementById("middle_right"); 

    alert("its not going to work!"); 
    alert("here goes..."); 
    alert(min_height); 
    middle_left.style.minHeight = min_height; 
    alert("it works!"); 
    middle_right.style.minHeight = min_height; 
} 
2
window.onload = resize_middle; 

Прочитайте этот ресурс на assigning event handlers.

+0

О, ты меня шутишь! Я не могу этого сделать! Почему это работает? – Ell

+1

Ell: Посмотрите мой ответ за почему – Kurru

+0

@Ell: потому что 'resize_middle' оценивает _ функцию_, а' resize_middle() 'оценивает _ значение, возвращаемое функцией_. –

Смежные вопросы