JSFiddle - React, Tailwind, and code Playground

by Sergei Sokolov

HTML

<div></div>

CSS

div {
  width: 160px;
  height: 90px;
  cursor: pointer;
  border: 1px solid #CCC;
}

JavaScript

/**
 * для вопроса https://qna.habr.com/q/960791
 * Как сделать, при клике мышки на блок — 
 * меняется фон на красный, второй клик — желтый, 
 * третий — синий, четвертый клик опять красный?
 */
const triColor = function*() {
  const colors = 'red,yellow,blue'.split(',');
  let i = 0;
  while(true) yield colors[i++ % colors.length];
};
const colorGen = triColor();
const nextColor = () => colorGen.next().value;

document.querySelector('div')
  .addEventListener('click', (e) => {
    e.target.style.backgroundColor = nextColor();
  });