为什么我的脚本只适用于具有 ID 的第一个元素？ [复制]

Question

首先，这里是a screenshot of what I'm trying to achieve

这里是the solution I found online.

所以在尝试自己测试解决方案时，我创建了一个非常基本的 HTML 结构，如下所示。

<div id="block">
    <img
    id="img" class="cimg" src=
    "http://localhost:90/Get%20average%20color%20of%20image%20via%20Javascript/Archive.jpg">
</div>

<div id="block">
    <img
    id="img" class="cimg" src=
    "http://localhost:90/Get%20average%20color%20of%20image%20via%20Javascript/Archive.jpg">
</div>

<div id="block">
    <img
    id="img" class="cimg" src=
    "http://localhost:90/Get%20average%20color%20of%20image%20via%20Javascript/Archive.jpg">
</div>

Javascript 是这样的。

function averageColor(imageElement) {

        // Create the canavs element
        var canvas
            = document.createElement('canvas'),

            // Get the 2D context of the canvas
            context
                = canvas.getContext &&
                canvas.getContext('2d'),
            imgData, width, height,
            length,

            // Define variables for storing
            // the individual red, blue and
            // green colors
            rgb = { r: 0, g: 0, b: 0 },

            // Define variable for the 
            // total number of colors
            count = 0;

        // Set the height and width equal
        // to that of the canvas and the image
        height = canvas.height =
            imageElement.naturalHeight ||
            imageElement.offsetHeight ||
            imageElement.height;
        width = canvas.width =
            imageElement.naturalWidth ||
            imageElement.offsetWidth ||
            imageElement.width;

        // Draw the image to the canvas
        context.drawImage(imageElement, 0, 0);

        // Get the data of the image
        imgData = context.getImageData(
                    0, 0, width, height);

        // Get the length of image data object
        length = imgData.data.length;

        for (var i = 0; i < length; i += 4) {

            // Sum all values of red colour
            rgb.r += imgData.data[i];

            // Sum all values of green colour
            rgb.g += imgData.data[i + 1];

            // Sum all values of blue colour
            rgb.b += imgData.data[i + 2];

            // Increment the total number of
            // values of rgb colours
            count++;
        }

        // Find the average of red
        rgb.r
            = Math.floor(rgb.r / count);

        // Find the average of green
        rgb.g
            = Math.floor(rgb.g / count);

        // Find the average of blue
        rgb.b
            = Math.floor(rgb.b / count);

        return rgb;
    }

    // Function to set the background
    // color of the second div as 
    // calculated average color of image
    var rgb;

    setTimeout(() => {
        rgb = averageColor(
            document.getElementById('img'));

        // Select the element and set its
        // background color
        document
            .getElementById("block")
            .style.backgroundColor =
            'rgb(' + rgb.r + ','
            + rgb.g + ','
            + rgb.b + ')';
    }, 500)

所以基本上我上面所做的就是创建一个包含图像的 div。然后使用 javascript 将背景应用到 div。 现在的问题是这只适用于第一个 div。但我希望它适用于 div 的其余部分。

我尝试使用循环，但也没有用。

    // Function to set the background
    // color of the second div as 
    // calculated average color of image
    var rgb;
    var imgg = document.getElementsByClassName("card1");
    var i;
    for (i = 0; i < imgg.length; i++) {
        rgb = averageColor(document.getElementById('img'));
  
        // Select the element and set its
        // background color
        document
            .getElementById("block")
            .style.backgroundColor =
            'rgb(' + rgb.r + ','
            + rgb.g + ','
            + rgb.b + ')';
    }

有人可以帮我吗？

Answer 1

HTML 元素的每个 ID 都必须是唯一的。改用类。

<div class="block">
<img class="cimg" src="http://localhost:90/Get%20average%20color%20of%20image%20via%20Javascript/Archive.jpg">
</div>

<div class="block">
    <img class="cimg" src="http://localhost:90/Get%20average%20color%20of%20image%20via%20Javascript/Archive.jpg">
</div>

<div class="block">
    <img class="cimg" src="http://localhost:90/Get%20average%20color%20of%20image%20via%20Javascript/Archive.jpg">
</div>

和

var rgb;
var imgg = document.getElementsByClassName("cimg");
var blocks = document.getElementsByClassName("block");
var i;
for (i = 0; i < imgg.length; i++) {
    rgb = averageColor(imgg[i]);

    blocks[i].style.backgroundColor =
        'rgb(' + rgb.r + ','
        + rgb.g + ','
        + rgb.b + ')';
}