Show the information separately

Question

I'm trying to make a simple color picker and have a problem. Here is codepen [link with the code][1]. I want to show information about color into the 'info' section of that 'square' which was pressed. Now, when I click the 'square', information shows in every 'info' sections. Please give me an advice

 var squares = document.querySelectorAll('.square'); for (var i = 0; i < squares.length; i++) { var square = squares[i]; square.addEventListener('click', function() { var a = Math.floor(Math.random() * 256); var b = Math.floor(Math.random() * 256); var c = Math.floor(Math.random() * 256); var rgbColor = "rgb(" + a + ", " + b + ", " + c + ")"; this.style.backgroundColor = rgbColor; var infos = document.querySelectorAll('.info') for (var i = 0; i < infos.length; i++){ var info = infos[i]; info.innerHTML = rgbColor; } }); } 

 .square { width: 200px; height: 200px; border: 1px solid black; float: left; } .info { width: 200px; height: 50px; border: 1px solid black; margin-top: 10px; display: flex; align-items: center; justify-content: center; } 

 <div class='square'></div> <div class='info'></div> <div class='square'></div> <div class='info'></div> 

Answer 1

 var squares = document.querySelectorAll('.square'); for (var i = 0; i < squares.length; i++) { var square = squares[i]; square.addEventListener('click', function() { var a = Math.floor(Math.random() * 256); var b = Math.floor(Math.random() * 256); var c = Math.floor(Math.random() * 256); var rgbColor = "rgb(" + a + ", " + b + ", " + c + ")"; this.style.backgroundColor = rgbColor; var info = document.getElementById(this.id + "x"); info.innerHTML = rgbColor; }); } 

 .square { width: 200px; height: 200px; border: 1px solid black; float: left; } .info { width: 200px; height: 50px; border: 1px solid black; margin-top: 10px; display: flex; align-items: center; justify-content: center; } 

 <div id='square1' class="square"></div> <div id='square1x' class="info"></div> <div id='square2' class="square"></div> <div id='square2x' class="info"></div> 

Answer 2

I think you need add the color value with respected box.Try this nextElementSibling

 var squares = document.querySelectorAll('.square'); for (var i = 0; i < squares.length; i++) { var square = squares[i]; square.addEventListener('click', function() { var a = Math.floor(Math.random() * 256); var b = Math.floor(Math.random() * 256); var c = Math.floor(Math.random() * 256); var rgbColor = "rgb(" + a + ", " + b + ", " + c + ")"; this.style.backgroundColor = rgbColor; this.nextElementSibling.innerHTML = rgbColor; }); } 

 .square { width: 200px; height: 200px; border: 1px solid black; float: left; } .info { width: 200px; height: 50px; border: 1px solid black; margin-top: 10px; display: flex; align-items: center; justify-content: center; } 

 <div class='square'></div> <div class='info'></div> <div class='square'></div> <div class='info'></div> 

Answer 3

You have to take in eventlistener the event as parameter so that you can get the info box with help of the clicked box.

square.addEventListener('click', function(e) {
  var a = Math.floor(Math.random() * 256);
  var b = Math.floor(Math.random() * 256);
  var c = Math.floor(Math.random() * 256);
  var rgbColor = "rgb(" + a + ", " + b + ", " + c + ")";
  this.style.backgroundColor = rgbColor;

  //The first nextSibling is the new line between your divs
  e.target.nextSibling.nextSibling.innerHTML = rgbColor;
});

https://codepen.io/anon/pen/QvVWGy