Suspicion Board Game - Character Tracker

For 2 player format.

HTML

<body>
  <div id="app-container">
    <input placeholder="Opponent">
    <p/>
    <div id="box-container"><div id="f2e200" class="box" onClick="boxClick('f2e200')">Yellow</div><div id="165dce" class="box" onClick="boxClick('165dce')">Blue</div><div id="6b6b6b" class="box" onClick="boxClick('6b6b6b')">Grey</div><div id="db0003" class="box" onClick="boxClick('db0003')">Red</div><div id="84541e" class="box" onClick="boxClick('84541e')">Brown</div><div id="efa0d0" class="box" onClick="boxClick('efa0d0')">Pink</div><div id="6b076d" class="box" onClick="boxClick('6b076d')">Purple</div><div id="ffffff" class="box" onClick="boxClick('ffffff')">White</div><div id="ffbb00" class="box" onClick="boxClick('ffbb00')">Orange</div><div id="a4ea00" class="box" onClick="boxClick('a4ea00')">Green</div>
    </div>
  </div>
</body>

CSS

body {}

#box-container {
  width: 260px;
  height: 104px;
}

.box {
  width: 50px;
  height: 50px;
  display: inline-block;
  border: black solid 1px;
  color: White;
  text-shadow: 1px 1px #000;
  text-align: center;
}

#f2e200 {
  background-color: #f2e200;
}

#165dce {
  background-color: #165dce;
}

#6b6b6b {
  background-color: #6b6b6b;
}

#db0003 {
  background-color: #db0003;
}

#84541e {
  background-color: #84541e;
}

#efa0d0 {
  background-color: #efa0d0;
}

#6b076d {
  background-color: #6b076d;
}

#ffffff {
  background-color: #ffffff;
}

#ffbb00 {
  background-color: #ffbb00;
}

#a4ea00 {
  background-color: #a4ea00;
}

JavaScript

var listed = ["f2e200", "165dce", "6b6b6b", "db0003", "84541e", "efa0d0", "6b076d", "ffffff", "fffbb00", "a4ea00"];

window.onload = function() {
  for (var i = 0; i < 8; i++) {
    boxClick(listed[i]);
    boxClick(listed[i]);
  }
}

function boxClick(x) {
  var words = "#" + x;
  if (document.getElementById(x).style.backgroundColor != "black") {
    document.getElementById(x).style.backgroundColor = "black";
  } else {
    document.getElementById(x).style.backgroundColor = words;
  }
}