CODEWITHSUNDEEP
javascript
Sergii Brusnyk
Sergii Brusnyk

Reputation: 57

Show the information separately

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>

Upvotes: 1

Views: 40

Answers (3)

prasanth
prasanth

Reputation: 22500

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>

Upvotes: 1

hendrikschneider
hendrikschneider

Reputation: 1846

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

Upvotes: 0

pokeybit
pokeybit

Reputation: 1032

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>

Upvotes: 1

Related Questions