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>

Please read [Something on my web site doesn't work. Can I just paste a link to it?](http://meta.stackoverflow.com/questions/125997/something-on-my-web-site-doesnt-work-can-i-just-paste-a-link-to-it). Questions that depend on external resources to be understood become useless when the external resource goes away or is fixed. Create a [MCVE] and put it in **the question itself** instead. It is often useful to provide your MCVE in the form of a [live demo embedded in the question](https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/) — Quentin, May 17 '17 at 09:36
(Note: There are no squares to click on if there is no HTML in the question). — Quentin, May 17 '17 at 09:36
Possible duplicate: http://stackoverflow.com/questions/11741070/js-how-to-get-the-element-clicked-on — Quentin, May 17 '17 at 09:39
Another duplicate: http://stackoverflow.com/questions/13893138/javascript-click-event-listener-on-multiple-elements-and-get-target-id — Quentin, May 17 '17 at 09:39

score 1 · Answer 1 · answered May 17 '17 at 09:41

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>

prasanth · Accepted Answer · 2017-05-17T09:46:16.030

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>

score 0 · Answer 3 · answered May 17 '17 at 09:44

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

Show the information separately

3 Answers3