body
  display: flex
  width: 100%
  height: 100vh
  justify-content: center
  align-items: center
  background-color: #222

.container
  width: 60%

.color
  display: block
  box-sizing: border-box
  width: 30px
  height: 30px
  border-radius: 50%
  border: 1px solid #fff
  margin: 30px 0

.black
  background-color: black

.haki
  background-color: green

.orange
  background-color: orangered

.checked-color
  border: 3px solid #fff

.image
  position: absolute
  width: 400px
  height: 400px
  top: 10%
  left: 50%

.checked-image
  z-index: 10

var container = document.getElementsByClassName('container')[0];
var colors = document.getElementsByClassName('color');
var images = document.getElementsByClassName('image');

function check(event) {
  var target = event.target;
  for (var i = 0; i < colors.length; i++) {
    colors[i].classList.remove('checked-color');
  };
  target.classList.add('checked-color');
  var color = target.classList[1];
  for (var j = 0; j < images.length; j++) {
    images[j].classList.remove('checked-image');
  };
  if (color == 'black') {
    black.classList.add('checked-image');
  } else if (color == 'haki') {
    haki.classList.add('checked-image');
  } else if (color == 'orange') {
    orange.classList.add('checked-image');
  };
};

container.addEventListener('click', check);