Циклическая смена background при наведении

#javascript_events

Задача состоит в том, чтобы при каждом наведении на элемент, у него менялся background.
3 раза он должен меняться, и далее, снова с первого.     



let getId = id => document.getElementById(id);
let check = 1;

if (check == 1) {
  getId('colorBox').onmouseover = function() {
    this.style.background = 'red';
  }
  getId('colorBox').onmouseout = function() {
    this.style.background = 'purple';
  }
  check = 2;
}
if (check == 2) {
  getId('colorBox').onmouseover = function() {
    this.style.background = 'yellow';
  }
  getId('colorBox').onmouseout = function() {
    this.style.background = 'purple';
  }
  check = 3;
}
if (check == 3) {
  getId('colorBox').onmouseover = function() {
    this.style.background = 'green';
  }
  getId('colorBox').onmouseout = function() {
    this.style.background = 'purple';
  }
  check = 1;
};



    

Ответы

Ответ 1

let check = -1;
let colors = ["red", "yellow", "green"];

document.querySelector('.colorBox').addEventListener("mouseenter", function(e) {
  this.classList.remove.apply(this.classList, colors);
  this.classList.add(colors[check = ++check % colors.length]);
});
document.querySelector('.colorBox').addEventListener("mouseleave", function(e) {
  this.classList.remove.apply(this.classList, colors);
});
.colorBox {
  border: 1px solid black;
  width:100px;
  height:100px;
  display:inline-block;
  background:lightgray;
}

.red {
  background:red;
}
.yellow {
  background:yellow;
}
.green {
  background:green;
}







Изменил строки 

this.classList.remove('red','yellow','green');


на 

this.classList.remove.apply(this.classList, colors);


чтобы содержимое массива colors  было известно только одному месту в коде.