my if statement does not work

Question

This JavaScript code is to change the background of a div if the content is different:

function myfunction() {
    $a = document.getElementById('t').getElementsByTagName('div');
    var x = 0;
    while(x < $a.length) {
        var b = ($a[x].innerHTML);
        b.toString;
        alert(x + b[x]);
        if(b == 'PENDING SELECTING TEAM MEMBER' ||b == 'PENDING APPROVAL BY SCHEME MANAGER' ||b == 'PENDING SELECTING TEAM MEMBER' ||b == 'PENDING REVIEW TEAM MEMBER BY LEAD ASSESSOR' ||b == 'PENDING ACKNOWLEDGEMENT BY TA/LA' ||b == 'PENDING PREPARE AUDIT PLAN BY LA' ||b == 'PENDING REVIEW AUDIT PLAN BY AO' ||b == 'PENDING ACCEPT LA BY LAB' ||b == 'PENDING VERIFY REASON BY AO' ||b == 'PENDING CONDUCT ASSESSMENT' || b == 'PENDING CORRECTIVE ACTION BY CAB' || b == 'PENDING REVIEW BY AO' || b == 'PENDING CORRECTIVE ACTION APPROVAL BY SCHEME MANAGER' ||b == 'PENDING APPROVAL BY DOA' ){
            document.getElementById('status'+x).style.background="maroon";
            alert(x + b);
        }
        x++;

    }
}

It doesn't work because the if statement is failing.

Can someone help me figure out what's wrong?

Answer 1

Just as a note, b.toString; should be b.toString();

And personally I prefer using double quotes, but that's just due to being used to strongly type them and having a difference between characters and Strings.

Saw others say it, but just to emphasize : a variable in a function not having the 'var' keyword makes them global, meaning they are accessible, and changeable in any scope in the program.

Try using the following javascript code : JSFiddle

Changed the way you set the background colour.

Answer 2

Consider using _.contains from underscore.js , which would make the if a little less complex. Instead, it would look more like:

var collection = [
    'PENDING SELECTING TEAM MEMBER', 
    'PENDING APPROVAL BY SCHEME MANAGER', 
    'PENDING SELECTING TEAM MEMBER', 
    'PENDING REVIEW TEAM MEMBER BY LEAD ASSESSOR', 
    'PENDING ACKNOWLEDGEMENT BY TA/LA', 
    'PENDING PREPARE AUDIT PLAN BY LA', 
    'PENDING REVIEW AUDIT PLAN BY AO', 
    'PENDING ACCEPT LA BY LAB', 
    'PENDING VERIFY REASON BY AO', 
    'PENDING CONDUCT ASSESSMENT', 
    'PENDING CORRECTIVE ACTION BY CAB', 
    'PENDING REVIEW BY AO', 
    'PENDING CORRECTIVE ACTION APPROVAL BY SCHEME MANAGER', 
    'PENDING APPROVAL BY DOA'];

if(_.contains(collection, b)) {
    alert("this condition is true!");
    //...
}

If it alerts, it's a problem within the if statement. If not, the condition isn't being met and I'd probably start by looking at leading and trailing whitespace in the HTML.

Answer 3

You can "test" your if statement by simplifying it (this is a universal debugging technique):

var b = 'PENDING SELECTING TEAM MEMBER';

if (b == 'PENDING SELECTING TEAM MEMBER' || b == 'PENDING APPROVAL BY SCHEME MANAGER' || b == 'PENDING SELECTING TEAM MEMBER' || b == 'PENDING REVIEW TEAM MEMBER BY LEAD ASSESSOR' || b == 'PENDING ACKNOWLEDGEMENT BY TA/LA' || b == 'PENDING PREPARE AUDIT PLAN BY LA' || b == 'PENDING REVIEW AUDIT PLAN BY AO' || b == 'PENDING ACCEPT LA BY LAB' || b == 'PENDING VERIFY REASON BY AO' || b == 'PENDING CONDUCT ASSESSMENT' || b == 'PENDING CORRECTIVE ACTION BY CAB' || b == 'PENDING REVIEW BY AO' || b == 'PENDING CORRECTIVE ACTION APPROVAL BY SCHEME MANAGER' || b == 'PENDING APPROVAL BY DOA')
{
    alert("Working");
}