Помогите доделать код с JS

Question

В школе задали написать код. В ячейках, которые идут друг за другом должен меняться цвет в последовательности (допустим: красный синий синий, синий красный синий, синий синий красный) в помощью JavaScript. И обязательно в коде должен присутствовать SetInterval. Я написала код:

var colors = 'aqua-blue-violet'.split ('-');
onload = function ()
{
setInterval (function ()
  {
  var t = colors.shift ();
  document.getElementById("первая ячейка").style.backgroundColor = t;
  colors.push (t);
  }, 1000);
}
var colors = 'aqua-blue-violet'.split ('-');
onload = function ()
{
setInterval (function ()
  {
  var t = colors.shift ();
  document.getElementById("вторая ячейка").style.backgroundColor = t;
  colors.push (t);
  }, 1000);
}
var colors = 'aqua-blue-violet'.split ('-');
onload = function ()
{
setInterval (function ()
  {
  var t = colors.shift ();
  document.getElementById("третья ячейка").style.backgroundColor = t;
  colors.push (t);
  }, 1000);
}

Но к сожалению, цвет меняет лишь одна ячейка. Кто-нибудь, помогите!

Answer 1

window.addEventListener("load", function() {
  var colors = 'aqua-blue-violet'.split('-');
  var cells = document.querySelectorAll(".cell");
  setInterval(function() {
    colors.push(colors.shift());
    cells.forEach((cell, i) => cell.style.backgroundColor = colors[i]);
  }, 1000);
});

.cell {
  border: 1px solid black;
  width: 50px;
  height: 50px;
  display: inline-block;
}

<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>

БЛОГ НА HUSL

Помогите доделать код с JS

Ответы (1 шт):