Have an element react to another element change of state

Question

I have two divs, wrapping 8 divs each:

<div class="binaries">
    <div class="binary-number"> 0 </div>
    <div class="binary-number"> 0 </div>
    <div class="binary-number"> 0 </div>
    <div class="binary-number"> 0 </div>
    <div class="binary-number"> 0 </div>
    <div class="binary-number"> 0 </div>
    <div class="binary-number"> 0 </div>
    <div class="binary-number"> 0 </div>
</div>

<div class="numbers">
    <div class="each-number" data-value="128"> 128 </div>
    <div class="each-number" data-value="64"> 64 </div>
    <div class="each-number" data-value="32"> 32 </div>
    <div class="each-number" data-value="16"> 16 </div>
    <div class="each-number" data-value="8"> 8 </div>
    <div class="each-number" data-value="4"> 4 </div>
    <div class="each-number" data-value="2"> 2</div>
    <div class="each-number" data-value="1"> 1 </div>
 </div>

What I want to achieve, is that clicking, for example, the first div in the numbers section, changes the first div in the binaries section, but I'm not sure how to link them without adding a click handler to every single div in the numbers section.

Codepen: http://codepen.io/Hyde87/full/zNGXXw/

JS:

"use strict";

let count = 0;
const output = document.getElementById("output");
const gameResult = document.getElementById("gameResult");
const numbers = document.querySelector(".numbers");
const binaries = document.querySelectorAll(".binary-number");
const randomizer = document.querySelector(".randomizer");


/* Get the number value of every number on click using event delegation, then call the testValue function */
numbers.addEventListener("click", getValue);

function getValue(e){
  if (e.target.className == "each-number") {
    e.target.classList.add("light");
    let thisValue = e.target.getAttribute('data-value');
    count += parseInt(thisValue);
    console.log(count);
    testValue()
}}

   /* The values are added to the count variable, which is tested against the random number */
 function testValue(){
      if (count > parseInt(output.textContent)) {
    gameResult.textContent = "Wrong value, you went over it."
    count = 0;
    output.textContent = "";
  } else if (count === parseInt(output.textContent)) {
    gameResult.textContent = "You got it right!";
    output.textContent = "";
   }
  }

/* Gets a random number between 1 and 128 */
function getRandom() {
  return Math.floor(Math.random() * (128 - 1 + 1)) + 1;
}

/* Displays the random number and resets other values so we always start from scratch when we get a new random number */
randomizer.addEventListener("click", function() {
    gameResult.textContent = "";
    count = 0;
    output.textContent = getRandom();

    for (let i = 0; i < binaries.length; i++) {
    binaries[i].textContent = "0";
   }
 })

Answer 1

You don't have to add a click handler to every element inside numbers. Just add it to the parent element and get the index of the clicked event target.

Here is an example.

 var bin = document.getElementsByClassName('binaries')[0]; var num = document.getElementsByClassName('numbers')[0]; function numClick(evt) { var index = 0; for(var i = num.children.length - 1; i >= 0; i--) { if (evt.target == num.children[i]) { index = i; } } bin.children[index].classList.add('mark'); } num.addEventListener('click', numClick) 

 .mark { color: white; background: red; } .binaries , .numbers { display: flex; justify-content: space-between; } 

 <div class="binaries"> <div class="binary-number"> 0 </div> <div class="binary-number"> 0 </div> <div class="binary-number"> 0 </div> <div class="binary-number"> 0 </div> <div class="binary-number"> 0 </div> <div class="binary-number"> 0 </div> <div class="binary-number"> 0 </div> <div class="binary-number"> 0 </div> </div> <div class="numbers"> <div class="each-number" data-value="128"> 128 </div> <div class="each-number" data-value="64"> 64 </div> <div class="each-number" data-value="32"> 32 </div> <div class="each-number" data-value="16"> 16 </div> <div class="each-number" data-value="8"> 8 </div> <div class="each-number" data-value="4"> 4 </div> <div class="each-number" data-value="2"> 2</div> <div class="each-number" data-value="1"> 1 </div> </div> 

Answer 2

Add classes to binaries as

<div class="binaries">
    <div class="binary-number num-128"> 0 </div>
    <div class="binary-number num-64"> 0 </div>
    <div class="binary-number num-32"> 0 </div>
    <div class="binary-number num-16"> 0 </div>
    <div class="binary-number num-8"> 0 </div>
    <div class="binary-number num-4"> 0 </div>
    <div class="binary-number num-2"> 0 </div>
    <div class="binary-number num-1"> 0 </div>
  </div>

And add these two line in getValue function

let binaryElem = document.querySelector(".binary-number.num-"+thisValue);
binaryElem.textContent = "1";