My script only works on the first element with an ID

Question

First of all, here is a screenshot of what I'm trying to achieve

And here is the solution I found online.

So while trying to test the solution myself, I created a very basic HTML structure as follows.

<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>

And the Javascript went like this.

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)

so basically what i did above was to create a div that holds the image. And then use javascript to apply background to the div. The problem now is that this works only on the first div. But i want it to work on the rest of the div.

I tried using a loop but it didn't work either.

    // 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 + ')';
    }

Can someone help me out here?

bowlowl · Accepted Answer · 2022-02-15T00:42:49.673

Every ID for an HTML element must be unique. Use classes instead.

<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>

And

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

My script only works on the first element with an ID

1 Answers1