JavaScript循环逻辑不正确

Question

function authorNumbering() {
    var authorDivs = document.getElementById('authorView').getElementsByTagName("div");
    var labels = [];
    var nameForLabels = ["Author 1", "Author 2", "Author 3", "Author 4", "Author 5", "Author 6", "Author 7"]; 
    for (var i = 0; i < authorDivs.length; i++) {
        var labelsFromDiv = authorDivs[i].getElementsByTagName("label");
        for (var x = 0; x < labelsFromDiv.length; x++) {
            if (!(typeof labelsFromDiv.item(x) === "undefined" || labelsFromDiv.item(x) == null)) { 
                labels[x] = labelsFromDiv.item(x);

            }
        }
        labels[i].innerHTML = nameForLabels[i];
    }
}

本质上，该功能（或至少在我的脑海中起作用）通过并从作者div中获得了一堆标签。 然后，将标签（不是未定义或为null的标签）保存到数组中。 我现在希望能够更改上面显示的标签（在x ），但是由于某种原因， x总是为0或1。我尝试了几件事，但我认为我对逻辑的理解不足以理解正确地出来。 labels[]在数组中也有重复项，如何在仍然有两个循环的同时避免重复项？

我是JavaScript新手，但我正在尽力而为。

编辑1：哇，我真的搞砸了我想在那里做的事情。 感谢您的帮助，我已经更新了代码。

我要执行的操作是使用nameForLabels数组中的标签重命名标签。 这适用于第一个标签，但随后出现以下错误： TypeError: labels[i] is undefined

发生这种情况是因为labels永远不会超过1的长度，我认为labels每次都会被重写，而不是被写入数组的下一个位置。 x为何从未超过0？

我想看到的是， labels数组中的所有标签都更改为nameForLabels数组中的nameForLabels 。 例如， labels[0]中的labels[0]将成为Author 1 ， labels[1]将成为Author 2 ，依此类推。

编辑2：添加了HTML示例：

<div style="display: block;" id="authorView" class="form-horizontal">
    <div id="author0" class="form-group">
        <div class="col-sm-4 control-label"><label class="" for="author0" id="lblauthor0">Author 1:</label></div>
        <div class="col-sm-8">
            <div class="input-group"><input class="form-control" ... *keeps going with irrelevant information*
        </div>
    </div>
    <div id="author1" class="form-group">
        <div class="col-sm-4 control-label"><label class="" for="author1" id="lblauthor1">Author 2:</label></div>
        <div class="col-sm-8">
            <div class="input-group"><input class="form-control" ... *keeps going with irrelevant information*
        </div>
    </div>
    <div id="author2" class="form-group">
        <div class="col-sm-4 control-label"><label class="" for="author2" id="lblauthor2">Author 3:</label></div>
        <div class="col-sm-8">
            <div class="input-group"><input class="form-control" ... *keeps going with irrelevant information*
        </div>
    </div>
    <div id="author3" class="form-group">
        <div class="col-sm-4 control-label"><label class="" for="author3" id="lblauthor3">Author 4:</label></div>
        <div class="col-sm-8">
            <div class="input-group"><input class="form-control" ... *keeps going with irrelevant information*
        </div>
    </div>
    <div id="author4" class="form-group">
        <div class="col-sm-4 control-label"><label class="" for="author4" id="lblauthor4">Author 5:</label></div>
        <div class="col-sm-8">
            <div class="input-group"><input class="form-control" ... *keeps going with irrelevant information*
        </div>
    </div>
</div>

Answer 1

我不认为这正是您的代码，因为您没有函数名循环...除此之外，它确实有效。

https://jsfiddle.net/utswp2v0/

<script type="text/javascript">

    function FindGoodFunctionName() {
        var authorDivs = document.getElementById('authorView').getElementsByTagName("div");
        var labels = [];

        for (var i = 0; i < authorDivs.length; i++) {
            var labelsFromDiv = authorDivs[i].getElementsByTagName("label");
            for (var x = 0; x < labelsFromDiv.length; x++) {
                // Just "Not" ! the if statement, don't need to have a empty one
                if (typeof labelsFromDiv.item(x) === "undefined" || labelsFromDiv.item(x) == null) {  }
                else {
                    labels[x] = labelsFromDiv.item(x);
                    labels[x].innerHTML = "Author 1";
                    labels[x].innerHTML = "Author 2";
                    labels[x].innerHTML = "Author 3"; // This is weird, assigning 3 different value to the same label
                }
            }
        }
    }

</script>

<div id="authorView">
    <div><label></label><label></label><label></label></div>
    <div><label></label><label></label><label></label></div>
    <div><label></label><label></label><label></label></div>
</div>

<input type="button" onclick="FindGoodFunctionName();" value="test" />

更新

这就是您的html看起来的样子。

function FindGoodFunctionName() {
    var authorLabels = document.getElementById('authorView').getElementsByTagName("label");
    var labels = [];

    for (var i = 0; i < authorLabels.length; i++) {
        labels[i] = authorLabels[i];
        labels[i].innerHTML = "aaaa";
    }
}