[rbflowers]

Having some trouble with some code... I want to see how many of my div id's have green, yellow, red or gray backgrounds.

Here's what I have, but it's not working properly:

var divTitleIds = new Array("#TKITitle", "#bugsTitle","#engTitle","#tEngTitle","#attTitle","#gtsTitle","#goalsTitle","#RISTitle","#RplSTTitle","#agileTitle",
        "#availTitle", "#scalTitle", "#perfTitle", "#tCostTitle", "#BIRTitle", "#TTMTitle", "#CTTitle", "#edwatbTitle", "#edwbatchTitle", "#edwbatchTitle", "#mrtzTitle");

summaryColors("#summaryTitle", divTitleIds);

function summaryColors(div, arrayOfDivs) {
    var green = 0; var yellow = 0; var red = 0; var grey = 0;
    for (var i = 0; i < arrayOfDivs.length; i++) {
        if ($(arrayOfDivs[i]).css('background-color') == 'rgb(52,128,23)')
            green++;
        else if ($(arrayOfDivs[i]).css('background-color') == 'rgb(255,227,3)')
            yellow++;
        else if ($(arrayOfDivs[i]).css('background-color') == 'rgb(228,34,23)')
            red++;
        else
            grey++;
    }
    if (green / arrayOfDivs.length > .75)
        $(div).css('background-color', '#348017'); //green
    else if (green / arrayOfDivs.length > .25 && red / arrayOfDivs.length < .33)
        $(div).css('background-color', '#FFE303'); //yellow
    else
        $(div).css('background-color', '#E42217'); //red
}

the code is saying they are all gray (the first else statement) and therefore returning a red background for div (the last else statement).

the rgb values in the forloop correspond to the # values in the second set of checks. I tried using the #values both places and that didn't work either.

[Dormilich]

well, obviously the CSS returned from the .css() call does not match any of the values given. it would be a good idea just to echo out all values to see what they actually contain.

This post has been edited by Dormilich: 29 January 2013 - 02:56 AM

[andrewsw]

The value returned by background-color usually contains spaces between the numbers (depending on the browser), so it would be sensible to remove these before making your comparison:

var curr_colour = $(arrayOfDivs[i]).css('background-color');
curr_colour = curr_colour.replace(/\s/g, '');

Of course, you are still relying on an exact match for the three numbers. If you have control over the pages that you are inspecting then it would be better to use class-names and just use $('.class_1,.class_2,.class_etc') to refer to them all as a group.

This post has been edited by andrewsw: 29 January 2013 - 04:27 AM

[rbflowers]

andrewsw, on 29 January 2013 - 04:27 AM, said:

The value returned by background-color usually contains spaces between the numbers (depending on the browser), so it would be sensible to remove these before making your comparison:

var curr_colour = $(arrayOfDivs[i]).css('background-color');
curr_colour = curr_colour.replace(/\s/g, '');

Of course, you are still relying on an exact match for the three numbers. If you have control over the pages that you are inspecting then it would be better to use class-names and just use $('.class_1,.class_2,.class_etc') to refer to them all as a group.

worked perfectly thanks.