Javascript 无法循环获取平均图像颜色

我想在

文本颜色中获得所有三个图像背景颜色，但无法循环此操作如何将所有图像循环成一个， 我有三个图像，我只想循环这三个图像的颜色

这里-

感谢@james给出了这个惊人的答案

---

但仅支持id我希望在类方面

只需查看所有图像并构建平均值：

 const images = [...document.querySelectorAll(".someclass")];

 const result = { r: 0, g: 0, b: 0 };

 for(const image of images) {
   const {r, g, b} = getAverageRGB(image);
   result.r += r / images.length;
   result.g += g / images.length; 
   result.b += b / images.length;
 }

---

只需按类获取目标元素，就像使用

image

class检索节点一样

var r = document.getElementsByClassName('image');
var targets = document.getElementsByClassName('imagecolor');
var p ;
for (p = 0 ; p < r.length ; p++ ){
   var rgb = getAverageRGB(r[p]);
   targets[p].style.color = 'rgb('+rgb.r+','+rgb.g+','+rgb.b+')';
}

var r=document.getElementsByClassName（'image'）；
var targets=document.getElementsByClassName（'imagecolor'）；
var-p；
对于（p=0；p

为了获得更好的性能，避免在循环体中同时使用读DOM和写DOM操作（使用单独的循环）

var r=document.getElementsByClassName（'image'）；
var targets=document.getElementsByClassName（'imagecolor'）；
var rgb=[]；
对于（p=0；p{
目标[i].style.color='rgb（'+el.r+'、'+el.g+'、'+el.b+'）；
})

但每当重新加载页面时，都会返回警报（x）。您能举个例子吗？我在你或我的小提琴上看不到这个问题

var r = document.getElementsByClassName('image');
var targets = document.getElementsByClassName('imagecolor');
var rgb = [];
for (p = 0 ; p < r.length ; p++ ){
   rgb.push(getAverageRGB(r[p]));
}
rgb.forEach((el,i) => {
   targets[i].style.color = 'rgb('+el.r+','+el.g+','+el.b+')';
})