Changer la couleur d'arrière-plan div en fonction de la liste du tableau

Diasline

Comment puis-je appliquer la couleur d'arrière-plan trouvée dans le tableau à chaque div du rectangle de nom de classe.

<div id="rectangleWrapper">

<div id="rectangle-1">

</div>
<div id="rectangle-2">

</div>
</div>

const rectWrapDiv = document.getElementById("rectangleWrapper").children;
for (const prop of rectWrapDiv){
prop.classList.add("rectangle");
}

const bcgColor = ["red", "blue" ];
for (let i = 0; i < rectWrapDiv.length; i++){

for (let j = 0; j < bcgColor.length; j++){
    rectWrapDiv[i].style.background  = bcgColor[j];
console.log(bcgColor[j])
}

}

Lorsque je l'affiche dans le navigateur de la console, seul l'index 1 est pris en arrière-plan pour toutes les divs.

William Wang

Il suffit d'itérer le tableau en n'utilisant forqu'une seule fois comme enfants et la longueur de bcgColor est la même.

const rectWrapDiv = document.getElementById("rectangleWrapper").children;
for (const prop of rectWrapDiv) {
  prop.classList.add("rectangle");
}

const bcgColor = ["red", "blue"];
for (let i = 0; i < rectWrapDiv.length; i++) {
    rectWrapDiv[i].style.background = bcgColor[i];
}
#rectangle-1, #rectangle-2 {
  height: 50px;
}
<div id="rectangleWrapper">

  <div id="rectangle-1">

  </div>
  <div id="rectangle-2">

  </div>
</div>

Articles connexes