Having trouble consoling the which element's color matches....HELP

Here is a description of my problem and I will be following it with a link to my codePen…

I have 4 circles, 3 of them are one color, and 1 is a different color. I want to identify the circle with the 1 color that is different from the others using a function that gets called when a button is pressed. When I click the button I want to console.log this circle.

Currently I have it set up trying to return the index of the array (will make more sense when you look at it). But i cant get that to work. What is wrong here?

JavaScript is case-sensitive. Look at your browser’s console. There is an error showing that you need to resolve first.

Once you resolve that, then you could use the following inside the for loop to check the fill value. You must use getComputedStyle, because the styling is accomplished via CSS.

    const { fill } = window.getComputedStyle(picsArr[i]);
    if (fill === "rgb(76, 255, 92)") {
      console.log(i);
    }
1 Like

Thank you for that.

So the document refers to the html code where as the window refers to whats actually being displayed?

No, getComputedStyle is just a method that can be called on the window object. You can actually get by just calling getComputedStyle without the window. preceding it as the browser will search in the global scope and find it. It is typically referenced with the window in front to explicitly reference the window object’s method.