javascript - 为什么 document.GetElementsByClassName() for loop 缺少一些元素？

Question

为什么我不能用我的函数一次更改每个具有特定名称的类？我希望有一个白天或夜晚模式作为一个按钮，可以将所有“暗”类元素更改为“亮”等等。它仅在我多次按下按钮时才有效，就好像我的 for 循环正在计时一样，因为我正在使用元素的长度来停止，并且在 for 循环期间该长度可能会减少，从而缩短它？如果这是真的，我该如何解决这个问题？

我让网站上线，这样你就可以看到问题并检查我的代码。 https://angry-euclid-939cdc.netlify.com/templates/page2.html

这是代码：

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>

谢谢窥视。

标签： javascripthtmlcss

Answer 1

首先，在同一页面上为多个元素设置相同的ID是错误的。您可以使用 querySelectorAll 代替 getElementsByClassName。请查看下面提供的代码：

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>