Динамическое изменение цвета Div с использованием цикла for

Question

let colors = ["red","green","cyan"];
let start = colors[0];
let div = document.getElementById("color");


setInterval(function(){
  document.getElementById("color").style.backgroundColor=colors[0];
  for(var x = 0; x < colors.length; x++){
      document.getElementById("color").style.backgroundColor=colors[x];
      if(colors[x] == colors[colors.length-1]){
          div.style.backgroundColor=start;
          colors[x]++;
      }
    }
},500);

По сути, он проходит через цвета, но не сбрасывается.Что я на самом деле делаю здесь не так?

Обновление:

Благодаря ответу ниже я смог понять, что я делал неправильно.Я переписал его, основываясь на том, как я пытался сделать это для For Loops.

let colors = ["red","green","cyan","purple","grey"];
let div = document.getElementById("color");

document.getElementById("color").style.backgroundColor=colors[0];

for(let x = 0; x < (colors.length / colors.length); x++){
    var i = x;
    div.style.backgroundColor=colors[i];
}

setInterval(function(){
    div.style.backgroundColor=colors[i];
    i++;
    if(i==colors.length){
        i=0;
    }
},300);

Хотя это неэффективно, я хотел сделать это исключительно для целей тестирования.

Answer 1

Вы запускаете цикл for каждые 500 мс ... но каждое изменение цвета выполняется внутри цикла немедленно

У браузера нет времени показывать что-либо еще, кроме последнего фона

Если вы хотите просто прокрутить эти цвета, код очень прост

let colors = ["red","green","cyan"];
let index = 0;
let div = document.getElementById("color");

setInterval(function(){
    div.style.backgroundColor=colors[index];
    index = (index + 1) % colors.length;
},500);

<div id="color">
DIV!
</div>