Question

我正在尝试使用对象的onclick通知程序更改div的类。代码看起来应该可以工作，但是当我使用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

你的循环有两个问题：

您正在循环浏览元素列表，然后无需尝试通过id获取它们。所以改变这两行：
```
var object = elements[i].id;
document.getElementById(object).className='hidden';
```
为：
```
elements[i].className='hidden';
```
更改可以解决问题：将this working version（source）与your original（source）进行比较，但我还没想出为什么。 :-) getElementById正在返回null，即使您已明确指定了id（事实上，我们正是从元素中正确地获取它们）。
< / LI>
但是，虽然以上是您需要解决的问题，但这并不是您遇到错误的原因。该错误来自您使用for-in循环遍历NodeList。使用普通for循环：
```
for (var i = 0; i < elements.length; ++i) {
```
请记住，for-in 不关于循环数组元素（并且getElementsByClassName的返回值不是数组），它是关于循环遍历可枚举的属性名称一个东西。在您的情况下，您会看到它循环两次：属性"0"一次，属性"length"一次。由于您没有id "length"的元素，因此getElementById会为null返回id，因此您的下一行会爆炸。

有关for-in on my blog的神话和现实的更多信息，以及有关循环数组的各种“正确”方法的更多信息（尽管如此，这不是代码中的elements） here on Stack Overflow

Javascript更改类的麻烦

1 个答案: