JSFiddle - React, Tailwind, and code Playground

by parksd

HTML

<select id='spanSelector'>
  <option>span1</option>
  <option>span2</option>
  <option>span3</option>
  <option>span4</option>
  <option>span5</option>
</select>
<div id="colorPanel">

  <button id="red">빨</button>
  <button id="blue">파</button>
  <button id="yellow">노</button>
</div>

<div id="spanContainer">
  <span id="span1">span 1</span>
  <span id="span2">span 2</span>
  <span id="span3">span 3</span>
  <span id="span4">span 4</span>
  <span id="span5">span 5</span>
</div>

JavaScript

(function() {

  var divColorPanel = document.getElementById("colorPanel"),
    selectSpanSelector = document.getElementById("spanSelector"),
    divSpanContainer = document.getElementById("spanContainer");

  var controllerObj = {
    "red": function(target) {
      target.style.backgroundColor = "red";
    },
    "blue": function(target) {
      target.style.backgroundColor = "blue";
    },
    "yellow": function(target) {
      target.style.backgroundColor = "yellow";
    },
  }
  var proxyClickEventHandler = function(command) {
    var target = document.getElementById(selectSpanSelector.value);
    controllerObj[command].call(this, target);
  }

  divColorPanel.addEventListener("click", function(e) {
    var target = e.target || e.srcElement;
    proxyClickEventHandler(target.id);
  }, true);
}());