Why is document.GetElementsByClassName() for loop missing some elements?

Question

Why can't I change every class with a certain name at once with my function? I want to have a day or night mode as a button that can change all "dark" class elements to "light" and so forth. It only works if I press the button multiple times as if my for loop is timing up short cuz I'm using the length of the elements to stop and maybe that length is decreasing during the for loop thus shortening it out? If that's true, how do I solve this problem?

I made the website live so you can see the problem and inspect my code. https://angry-euclid-939cdc.netlify.com/templates/page2.html

Here is the code:

function AllDay(){
    var night = document.getElementById("night");
    if(night){
        night.innerHTML = "Day";
        console.log(night);
        night.id= "day";
        console.log("changing night to day")
    }
    var stuff = document.getElementsByClassName("dark");
    if(stuff){
        for(var i= 0; i < 10; i++){
            if(stuff[i]){
                stuff[i].className = "light";
            }
        }
    }
}

function AllNight(){
    var day = document.getElementById("day");
    if(day){
        day.innerHTML = "Night";
        day.id = "night";
        console.log("changing day to night");
    }
    var stuff = document.getElementsByClassName("light");
    if(stuff){
        for(var i= 0; i < 10; i++){
            if(stuff[i]){
                stuff[i].className = "dark";
            }
        }
    }
}

.dark{
    background-color: darkgray;
}
.light{
    background-color: lightblue;
    font-size: 3ch;
}
#higher{
    height:400px;
    border: 1ch solid rosybrown;
}


#middle{
    padding:5rem;
}
#upper{
    text-align: right;
}
.inline{
    display: inline-block;
}

<div id="rapper">
        <div id="night">Night</div>
        <div id="upper">
            <div class="inline">In-line</div>
            <div class="inline">In-line</div>
           <div class="inline"><button onclick="AllDay()">All Day</button></div>
            <div class="inline"><button onclick="AllNight()">All Night</button></div>

        </div>
        <div id="higher" class="dark">
            <p>Higher?</p>
        </div>
        <div id="middle1" class="dark">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae nemo, sed eum ad, sequi eveniet ratione quibusdam atque omnis magni accusantium numquam iste illo, in soluta deserunt placeat deleniti. Inventore.</p>
        </div>
        <div id="lower1" class="dark">
            <p>Lorem ipsum aslkdf;</p>
        </div>
        <div id="lower2" class="dark">
                <p>Lorem ipsum aslkdf;</p>
        </div>
        <div id="lower3" class="dark">
                <p>Lorem ipsum aslkdf;</p>
        </div>
        <div id="middle2" class="dark">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae nemo, sed eum ad, sequi eveniet ratione quibusdam atque omnis magni accusantium numquam iste illo, in soluta deserunt placeat deleniti. Inventore.</p>
            </div>
            <div id="lower4" class="dark">
                <p>Lorem ipsum aslkdf;</p>
            </div>
            <div id="lower5" class="dark">
                    <p>Lorem ipsum aslkdf;</p>
            </div>
            <div id="lower6" class="dark">
                    <p>Lorem ipsum aslkdf;</p>
            </div>
    </div>

Thanks peeps.

I did not check your link, but this sound like a duplicate of [this question](https://stackoverflow.com/questions/31311815/how-to-change-class-for-all-elements-retrieved-by-document-getelementsbyclassnam). Please check that. If I am wrong, then please embed the relevant code *inside* the question. — trincot, Jan 05 '19 at 21:11
Post the problematic code here. Don't like it out to some other url. — basic, Jan 05 '19 at 21:28

score 0 · Answer 1 · answered Jan 05 '19 at 21:59

First of all, it is wrong to set the same ID for more than one element on the same page. You can use querySelectorAll instead of getElementsByClassName. Please look at the provided code below:

function AllDay(){
        var stuff = document.querySelectorAll(".dark");
        if(stuff){
            for (var i = 0; i < stuff.length; i++){
                    stuff[i].className = "light";
                
            }
        }
    }

    function AllNight(){
        var stuff = document.querySelectorAll(".light");
         if (stuff) {
            for (var i = 0; i < stuff.length; i++){
                 stuff[i].className = "dark";
            }
        }
    }

.dark{
    background-color: darkgray;
}
.light{
    background-color: lightblue;
    font-size: 3ch;
}
#higher{
    height:400px;
    border: 1ch solid rosybrown;
}


#middle{
    padding:5rem;
}
#upper{
    text-align: right;
}
.inline{
    display: inline-block;
}

<div id="rapper">
        <div id="night">Night</div>
        <div id="upper">
            <div class="inline">In-line</div>
            <div class="inline">In-line</div>
           <div class="inline"><button onclick="AllDay()">All Day</button></div>
            <div class="inline"><button onclick="AllNight()">All Night</button></div>

        </div>
        <div id="higher" class="dark">
            <p>Higher?</p>
        </div>
        <div id="middle1" class="dark">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae nemo, sed eum ad, sequi eveniet ratione quibusdam atque omnis magni accusantium numquam iste illo, in soluta deserunt placeat deleniti. Inventore.</p>
        </div>
        <div id="lower1" class="dark">
            <p>Lorem ipsum aslkdf;</p>
        </div>
        <div id="lower2" class="dark">
                <p>Lorem ipsum aslkdf;</p>
        </div>
        <div id="lower3" class="dark">
                <p>Lorem ipsum aslkdf;</p>
        </div>
        <div id="middle2" class="dark">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae nemo, sed eum ad, sequi eveniet ratione quibusdam atque omnis magni accusantium numquam iste illo, in soluta deserunt placeat deleniti. Inventore.</p>
            </div>
            <div id="lower4" class="dark">
                <p>Lorem ipsum aslkdf;</p>
            </div>
            <div id="lower5" class="dark">
                    <p>Lorem ipsum aslkdf;</p>
            </div>
            <div id="lower6" class="dark">
                    <p>Lorem ipsum aslkdf;</p>
            </div>
    </div>

"getElementsByClassName, like other HTML collections, is "live", that is, when you assign another class name to its member, it's removed from the collection on the fly and its length gets decremented. That's why your loop runs only once." — Maxwell Jann, Jan 06 '19 at 16:30
If you run the code you will see that it is exactly what you anticipate. It is working correctly. What is the problem? — BthGh, Jan 06 '19 at 17:26
No if you go to the website I made it takes multiple button presses to turn all the lights off but I want them to all turn off at once. — Maxwell Jann, Jan 06 '19 at 20:18
Did you try my example? When you click on "All day" button all of them become light AT ONCE, and when you click on "All night" all the lights turn off AT ONCE. — BthGh, Jan 07 '19 at 09:11
Hey thanks user1825943 you really helped me. That's exactly what I was looking for. querySelectorAll(".class_name") — Maxwell Jann, Jan 16 '19 at 09:59

Why is document.GetElementsByClassName() for loop missing some elements?

1 Answers1