Проблема с классами смены Javascript

Question

Я пытаюсь изменить класс div, используя onclick уведомитель объекта. Код выглядит так, как будто он должен работать, но когда я пытаюсь устранить неполадки с Firebug, похоже, что цикл for (который даже Firebug показывает только 1 элемент в нем) выполняется более одного раза и вызывает ошибку во второй раз. Вот Javascript:

function handleElements(elementid,containerid) { 
// Get array of all 'visible' elements in the container 
var elements = document.getElementById(containerid).getElementsByClassName('visible'); 

// Iterate over that array and make them all 'hidden' 
for (var i in elements) { 
    var object = elements[i].id; 
    document.getElementById(object).className='hidden'; 
} 

// Get the 'clicked' tab and set it to 'visible' 
var clicked = document.getElementById(elementid); 
clicked.className='visible'; 
} 

А вот HTML:

<div id="wrapper"> 
<div id="leftpanel"> 
    <div id="navcontainer"> 
     <ul id="navlist"> 
      <li><a href="javascript:;" onClick="handleElements('Modules','rightpanel')">Modules</a></li> 
      <li><a href="javascript:;" onClick="handleElements('DataViewer','rightpanel')">Data Viewer</a><li> 
      <li><a href="javascript:;" onClick="handleElements('Alarms','rightpanel')">Alarms</a><li> 
      <li><a href="javascript:;" onClick="handleElements('Logging','rightpanel')">Logging</a><li> 
      <li><a href="javascript:;" onClick="handleElements('Outputs','rightpanel')">Output Control</a><li> 
     </ul> 
    </div> 
</div> 

<div id="rightpanel"> 
    <div id="Modules" class="visible"> 
     <h2>Module Information Here</h2> 
    </div> 
    <div id="DataViewer" class="hidden"> 
     <h2>Data Viewer Here</h2> 
    </div> 
    <div id="Alarms" class="hidden"> 
     <h2>Alarm Page Here</h2> 
    </div> 
    <div id="Logging" class="hidden"> 
     <h2>Logging Setup Here</h2> 
    </div> 
    <div id="Outputs" class="hidden"> 
     <h2>Output Control Here</h2> 
    </div> 
</div> 

Answer 1

Есть две проблемы с вашей петлей:

1. Вы зацикливания через список элементов, нет необходимости, затем попробуйте получить их на id. так изменить эти две строки:

   var object = elements[i].id; 
   document.getElementById(object).className='hidden'; 
   

   в:

   elements[i].className='hidden'; 
   

   Changing, который фиксирует проблему: Compare this working version (source) к your original (source), но я не понял, пока почему , :-) getElementById возвращает null, хотя вы четко назначили id (и на самом деле мы получаем их правильно из элементов).

2. Но в то время как выше, это то, что вам нужно исправить, это не значит, что у вас есть ошибка. Ошибка исходит от вашего использования for-in, чтобы пройти через NodeList. Используйте нормальный for цикл:

   for (var i = 0; i < elements.length; ++i) { 
   

   Помните, что for-in является не о пробегаем по элементам массива (а возвращаемое значение getElementsByClassName не является массивом), речь идет о перекручивание через перечислимых имена свойств объекта. В вашем случае вы видите его дважды: один раз для свойства "0" и один раз для свойства "length". Поскольку у вас нет элемента с id"length", ваша следующая строка взорвется, так как getElementById возвращает null за это id.

   Подробнее о мифах и реалиях for-inon my blog, и больше о различных «правильных» способов перебора массивов (хотя опять же, это не то, что elements в вашем коде) here on Stack Overflow.