Javascript 单独显示信息

我试图做一个简单的颜色选择器，但遇到了一个问题。这里是codepen[代码链接][1]。我想在按下的“正方形”的“信息”部分显示有关颜色的信息。现在，当我点击“正方形”时，信息显示在每个“信息”部分。请给我一个建议

var squares=document.querySelectorAll（'.square'）；
对于（变量i=0；i

.square{
宽度：200px；
高度：200px；
边框：1px纯黑；
浮动：左；
}
.info{
宽度：200px；
高度：50px；
边框：1px纯黑；
边缘顶部：10px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}

var squares=document.querySelectorAll（'.square'）；
对于（变量i=0；i

.square{
宽度：200px；
高度：200px；
边框：1px纯黑；
浮动：左；
}
.info{
宽度：200px；
高度：50px；
边框：1px纯黑；
边缘顶部：10px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}

---

我认为您需要将

颜色值添加到“受尊重”框中。试试这个


var squares=document.querySelectorAll（'.square'）；
对于（变量i=0；i

.square{
宽度：200px；
高度：200px；
边框：1px纯黑；
浮动：左；
}
.info{
宽度：200px；
高度：50px；
边框：1px纯黑；
边缘顶部：10px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
您必须将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;
});

请阅读。当外部资源消失或固定时，依赖外部资源理解的问题将变得无用。创建一个问题，并将其放在问题本身中。以a的形式提供MCVE通常很有用（注意：如果问题中没有HTML，则没有可点击的方块）。可能重复：另一个重复：