Javascript loop logic is incorrect

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];
    }
}

Essentially the function (or at least what it does in my head) goes through and gets a bunch of labels from the author divs. I then save the labels (which are not undefined or null) into an array. I now would like to be able to change the labels as shown above (at x ) but for some reason x is always either 0 or 1. I've tried a couple things but I don't think I understand the logic enough to figure it out properly. labels[] also has duplicates within the array, how can I avoid having duplicates while still having two loops?

I'm new to JavaScript but I'm trying my best.

Edit 1: Wow, I really messed up what I was trying to do there. Thanks for the help I've updated the code.

What I want to do is rename the labels with a label from nameForLabels array. This works for the first label but then I receive the following error: TypeError: labels[i] is undefined

This is happening because labels never exceeds the length of 1, I think it gets rewritten every time rather than get written to the next position in the array. How come x never goes higher than 0?

What I would like to see is all the labels in the labels array get changed to those that are in the nameForLabels array. For example the label in labels[0] would become Author 1 , and labels[1] would become Author 2 and so on.

Edit 2: HTML example added:

<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

I don't think that is exactly your code since you can't have a function name loop... Apart from that, it does work.

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" />

Update

Here's how it can look like with your 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";
    }
}