Как изменить цвет текста каждую секунду?

Question

[gorwhoami]

<p id = 'p'>TEXT</p>

let colors = ['red','pink','coral','orange','yellow','green'];

function changeColor(){  
  for(let color of colors){
    p.style.backgroundColor =`${colors[color]}`;
  }
}

let interval = setInterval(changeColor,1000 );
// как заставить работать этот код? Ничего не происходит и ошибки тоже не выдает

Answer 1

[twobomb]

let colors = ['red','pink','coral','orange','yellow','green'];
let colInx = 0;
(function changeColor(){
  document.querySelector("#p").style.backgroundColor = colors[colInx++%colors.length];
  setTimeout(changeColor, 1000);
})();

Answer 2

[Александр]

let colors = ['red', 'pink', 'coral', 'orange', 'yellow' ,'green'];
let index = 0;

function changeColor() {
  p.style.setProperty('background-color', colors[index++]);
  index %= colors.length;
}

let interval = setInterval(changeColor, 1000);

Comments

[gorwhoami]

Спасибо. А что это значит?

index %= colors.length;

[Александр]

gorwhoami, index = index % colors.length;, возвращает остаток от деления. То есть, если длина массива 3, а текущий индекс 1, до будет возвращать эту 1 (работает как mod), если 3, то вернет 0, т. к. 3 нацело делится 1 раз и остаток 0.

[gorwhoami]

Понятно,ноо вот код не работает почему-то...

[gorwhoami]

Сделал по другому, работает

let colors = ['red','pink','coral','orange','yellow','green'];

let i= 0;

function changeColor(){  
   p.style.backgroundColor = colors[i];
   i++;
   if (i >= colors.length) {
     i = 0;
   }
}

window.setInterval(changeColor,1000 );

[Александр]

gorwhoami, А, случайно допустил ошибку, поправил.

[gorwhoami]

Да, теперь работает а где была ошибка?

[Александр]

gorwhoami, 'backgroundColor' в 'background-color' изменил

[gorwhoami]

Ясно Спасибо