单独显示信息

Question

我试图制作一个简单的颜色选择器并遇到问题。这是codepen [链接代码] [1]。我想在＆＃39; info＆＃39;中显示有关颜色的信息。该部分＆＃39; square＆＃39;被压了。现在，当我点击＆＃39; square＆＃39;时，信息显示在每个＆＃39;信息＆＃39;部分。请给我一个建议

＆＃13;

＆＃13;

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;
    }
  });
}

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

我认为您需要将color value添加到受尊重的框中。请尝试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

您必须将eventlistener事件作为参数接收，以便您可以在单击框的帮助下获取信息框。

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