Javascript 如果是偶数或奇数，如何在单击不同颜色的按钮后添加div

我想单击一个按钮，在id容器中添加一个div，如果是奇数或偶数，则使用不同的颜色背景。这是我写的代码。我尝试在for循环中使用带模的if语句。nextDiv e Nextdiv2有两种不同的背景

HTML

文件
克里卡·奎

JAVASCRIPT

var container = document.getElementById("container");
    var button = document.getElementById("button");

    var divs  = document.getElementsByClassName("divs");


    button.addEventListener("click", AddDiv);

    function AddDiv() {

                nextDivs = document.createElement("div");
                nextDivs.setAttribute("class", "nextDiv"); 
                container.appendChild(nextDivs);
            } 
        for(i = 0; i < container.length; i++) {    
                if(i % 2 !== 0){
                    nextDivs.ClassList.add("nextDiv");
                }
                    nextDivs.classList.remove("nextDiv2");
            }

var container=document.getElementById（“容器”）；
var button=document.getElementById（“按钮”）；
var divs=document.getElementsByClassName（“divs”）；
按钮。addEventListener（“单击”，AddDiv）；
函数AddDiv（）{
nextDivs=document.createElement（“div”）；
nextDivs.setAttribute（“类”、“nextDiv”）；
容器.appendChild（nextDivs）；
} 
对于（i=0；i

---

谢谢

您必须计算容器中有多少个div，因此，当您添加一个div时，您知道您是否有奇数或偶数，从而放置该类

var-button=document.getElementById（“按钮”）；
按钮。addEventListener（“单击”，AddDiv）；
函数AddDiv（）{
var container=document.getElementById（“容器”）；
var nextDivs=document.createElement（“div”）；
if（container.getElementsByTagName（'div'）。长度%2==0）{
nextDivs.setAttribute（“类”、“偶数”）；
}否则{
nextDivs.setAttribute（“类”、“奇数”）；
}
容器.appendChild（nextDivs）；
}

.odd{
背景色：红色；
宽度：10px；
高度：10px；
}
.甚至{
背景颜色：黄色；
宽度：10px；
高度：10px；
}

克利卡奎

我创建了一个变量来计算创建的div总数，并使用它来计算下一个div是否将使用nextDiv或nextDiv2

let container=document.getElementById（“container”）；
let button=document.getElementById（“按钮”）；
设divs=document.getElementsByClassName（“divs”）；
按钮。addEventListener（“单击”，AddDiv）；
设countDivs=0；
函数AddDiv（）{
nextDivs=document.createElement（“div”）；
如果（countDivs%2==0）{
nextDivs.setAttribute（“类”、“nextDiv”）；
}否则{
nextDivs.setAttribute（“类”、“nextDiv2”）；
}
countDivs++；
容器.appendChild（nextDivs）；
}

.nextDiv、.nextDiv2{
宽度：300px；
高度：50px；
}
.nextDiv{
背景色：#2424；
}
.nextDiv2{
背景色：#de2121；
}
钮扣{
边缘底部：10px；
}

文件
克利奇·阿奎

您可能打算在

for

循环中使用

container.children.length

。只使用CSS，特别是选择器..怎么样。

var container = document.getElementById("container");
    var button = document.getElementById("button");

    var divs  = document.getElementsByClassName("divs");


    button.addEventListener("click", AddDiv);

    function AddDiv() {

                nextDivs = document.createElement("div");
                nextDivs.setAttribute("class", "nextDiv"); 
                container.appendChild(nextDivs);
            } 
        for(i = 0; i < container.length; i++) {    
                if(i % 2 !== 0){
                    nextDivs.ClassList.add("nextDiv");
                }
                    nextDivs.classList.remove("nextDiv2");
            }