Question

I’m trying to get a div to be assigned a CSS class based on the value of a hidden field that is loaded via ajax.

My code returns the proper value for the hidden field when called, but my div is always assigned the same css class, regardless of the result.

I’m guessing something is wrong with my IF statement syntax:

function doneLoading(){

var colorStatus = $('#colorStatus').val();

if(colorStatus = 'RED'){
    $('.circleFrame').addClass('redState'); 
}

else if(colorStatus = 'GREEN'){
    $('.circleFrame').addClass('greenState');   
}

else if(colorStatus = 'YELLOW'){
    $('.circleFrame').addClass('yellowState');  
}

else {
    alert("Something is broken");
}
}

Answer 1

You’re using the assignment operator instead of the comparison operator.

Try

if(colorStatus === 'RED'){
    $('.circleFrame').addClass('redState'); 
}

instead. (And similarly for the other colours.)