<button class="el state-1" data-state="1">
  <svg viewBox="0 0 512 512" width="100" title="info-circle">
    <path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z" />
  </svg>
</button>
body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background: #333;
}

.el {
  background: white;
  padding: 4rem 8rem;
  border: 0;
  border-radius: 1rem;
}

.el.state-1,
.el[data-state="1"] {
  background: #e53935;
}
.el.state-2,
.el[data-state="2"] {
  background: #ffee58;
}
.el.state-3,
.el[data-state="3"] {
  background: #66bb6a;
}

/*
  Just for fun!
*/
svg path {
  transition: 0.1s;
}
.el.state-1 svg path,
.el[data-state="1"] svg path {
  d: path(
    "M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"
  );
}
.el.state-2 svg path,
.el[data-state="2"] svg path {
  d: path(
    "M256 8c137 0 248 111 248 248S393 504 256 504 8 393 8 256 119 8 256 8zm-28.9 143.6l75.5 72.4H120c-13.3 0-24 10.7-24 24v16c0 13.3 10.7 24 24 24h182.6l-75.5 72.4c-9.7 9.3-9.9 24.8-.4 34.3l11 10.9c9.4 9.4 24.6 9.4 33.9 0L404.3 273c9.4-9.4 9.4-24.6 0-33.9L271.6 106.3c-9.4-9.4-24.6-9.4-33.9 0l-11 10.9c-9.5 9.6-9.3 25.1.4 34.4z"
  );
}
.el.state-3 svg path,
.el[data-state="3"] svg path {
  d: path(
    "M256 504C119 504 8 393 8 256S119 8 256 8s248 111 248 248-111 248-248 248zm28.9-143.6L209.4 288H392c13.3 0 24-10.7 24-24v-16c0-13.3-10.7-24-24-24H209.4l75.5-72.4c9.7-9.3 9.9-24.8.4-34.3l-11-10.9c-9.4-9.4-24.6-9.4-33.9 0L107.7 239c-9.4 9.4-9.4 24.6 0 33.9l132.7 132.7c9.4 9.4 24.6 9.4 33.9 0l11-10.9c9.5-9.5 9.3-25-.4-34.3z"
  );
}
const el = document.querySelector(".el");
let s = 1;

el.addEventListener("click", () => {
  /*
    1
  */
  if (el.classList.contains("state-1")) {
    el.classList.remove("state-1");
    el.classList.add("state-2");
  } else if (el.classList.contains("state-2")) {
    el.classList.remove("state-2");
    el.classList.add("state-3");
  } else {
    el.classList.remove("state-3");
    el.classList.add("state-1");
  }

  /*
    2
  */
  // const STATE_1 = "state-1";
  // const STATE_2 = "state-2";
  // const STATE_3 = "state-3";
  // if (el.classList.contains(STATE_1)) {
  //   el.classList.remove(STATE_1);
  //   el.classList.add(STATE_2);
  // } else if (el.classList.contains(STATE_2)) {
  //   el.classList.remove(STATE_2);
  //   el.classList.add(STATE_3);
  // } else {
  //   el.classList.remove(STATE_3);
  //   el.classList.add(STATE_1);
  // }

  /*
    3
  */
  // const oldN = +/\bstate-(\d+)\b/.exec(el.getAttribute("class"))[1];
  // const newN = oldN >= 3 ? 1 : oldN + 1;
  // el.classList.remove(`state-${oldN}`);
  // el.classList.add(`state-${newN}`);

  /*
    4
  */
  // const classes = ["state-1", "state-2", "state-3"];
  //   const activeIndex = classes.findIndex((c) => el.classList.contains(c));
  //   const nextIndex = (activeIndex + 1) % classes.length;

  // el.classList.remove(classes[activeIndex]);
  // el.classList.add(classes[nextIndex]);

  // el.classList.replace(classes[activeIndex], classes[nextIndex]);

  /*
    4.5
  */
  // const states = ["state-1", "state-2", "state-3"];
  // const current = [...el.classList].find((cls) => states.includes(cls));
  // const next = states[(states.indexOf(current) + 1) % states.length];
  // el.classList.remove(current);
  // el.classList.add(next);

  /*
    5
  */
  // el.classList.remove(`state-${s + 1}`);
  // s = (s + 1) % 3;
  // el.classList.add(`state-${s + 1}`);

  /*
    6
  */
  // el.classList.replace("state-1", "state-2") ||
  //   el.classList.replace("state-2", "state-3") ||
  //   el.classList.replace("state-3", "state-1");

  /*
    7
  */
  //el.dataset.state = (+el.dataset.state % 3) + 1;

  /*
    8
  */
  // const simpleMachine = {
  //   "1": "2",
  //   "2": "3",
  //   "3": "1"
  // };
  // el.dataset.state = simpleMachine[el.dataset.state];

  /*
    9
  */
  //   const rotator = (classes) => ({ classList }) => {
  //     const current = classes.findIndex((cls) => classList.contains(cls));
  //     classList.remove(...classes);
  //     classList.add(classes[(current + 1) % classes.length]);
  //   };

  //   const rotate = rotator(["state-1", "state-2", "state-3"]);
  //   rotate(el);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.