SO-68925235

by David Thomas

HTML

<body id="body" class="griegos dark">
  <select class="forminput">
    <option value="chb">Camp Half-Blood</option>
    <option value="cj">Camp Jupiter</option>
    <option value="hv">Hotel Valhalla</option>
  </select>
</body>

CSS

.griegos {
  background: orange;
}

.romanos {
  background: purple;
}

.celtas {
  background: green;
}

JavaScript

window.addEventListener('DOMContentLoaded', () => {
  function wow(evt) {
    var index = {
      chb: "griegos",
      cj: "romanos",
      hv: "celtas"
    };
    document.getElementById("body")
      .classList.remove(
        [...evt.target.options]
        	.map(
          	(opt)=> index[opt.value]
          )
      );
    document.getElementById("body").classList.add(
    	index[evt.currentTarget.value]
    );
  }

  document.querySelector('select.forminput').addEventListener('change', wow);
});