Javascript 创建一个大小相同但背景颜色不同的矩形

说明：

每个矩形都需要用不同的背景色显示。 我创建了一个颜色数组，并使用内置的rand函数在矩形上激活它。 但所有矩形都以相同的颜色显示

var colors=['#F44336'、#FFEBEE'、#FFCDD2'、#ef9a'、#E57373'、#EF5350'、#F44336'、#E53935'、#d322f'、#c6228'、#B71C1C'、#FF8A80'、#ff352'、#；
var计数器=0；
函数addRect（）{
var rectobj=document.getElementsByClassName（“矩形”）[0]；
var=”；
对于（变量i=0；i<15；i++）{
节+=”；
}
rectobj.innerHTML=节；
rectobj.style.backgroundColor=colors[Math.floor（Math.random（）*colors.length）]；
}
addRect（）
。矩形{
显示器：flex；
柔性包装：包装；
宽度：1000px；
}
.矩形>剖面{
高度：350px；
宽度：333px；
}
您正在将背景色应用于
矩形类。
试着这样做：


var colors=['#F44336'、#FFEBEE'、#FFCDD2'、#ef9a'、#E57373'、#EF5350'、#F44336'、#E53935'、#d322f'、#c6228'、#B71C1C'、#FF8A80'、#ff352'、#；
var计数器=0；
函数addRect（）{
var rectobj=document.getElementsByClassName（“矩形”）[0]；
var=”；
对于（变量i=0；i<15；i++）{
设bg=colors[Math.floor（Math.random（）*colors.length）]；
节+=”；
}
rectobj.innerHTML=节；
//rectobj.style.backgroundColor=colors[Math.floor（Math.random（）*colors.length）]；
}
addRect（）
。矩形{
显示器：flex；
柔性包装：包装；
宽度：1000px；
}
.矩形>剖面{
高度：350px；
宽度：333px；
}
尝试将函数更改为那样


function addRect() {
    var rectobj = document.getElementsByClassName("Rectangles")[0];
    var sections = "";

    for (var i = 0; i < 15; i++) {
        sections += "<section style='background-color: " + colors[Math.floor(Math.random() * colors.length)] + "'></section>";
    }
    rectobj.innerHTML = sections;
    
}


函数addRect（）{
var rectobj=document.getElementsByClassName（“矩形”）[0]；
var=”；
对于（变量i=0；i<15；i++）{
节+=”；
}
rectobj.innerHTML=节；
}


在您的解决方案中，您直接将它们分配给主容器，因此，它们总是相同的