Strange javascript issue if statement test = true but won't execute?

Question

In this click handler code:

$('#save').click(function () {
            if (overAllStatus == 'red') {
                rows[lastRowClicked].cells[0].innerHTML = '<a class="modalInput" rel="#flagsSummary" style="cursor:pointer"><img src="/FatcaOne_0/static/images/circleRed.png" width="20" height="20"></a>';
            }
            else if (overAllStatus == "yellow") {
                rows[lastRowClicked].cells[0].innerHTML = '<a class="modalInput" rel="#flagsSummary" style="cursor:pointer"><img src="/FatcaOne_0/static/images/circleYellow.png" width="20" height="20"></a>';
                console.log('Over all status is yellow.');
            }
            else if (overAllStatus == 'greenR') {
                rows[lastRowClicked].cells[0].innerHTML = '<a class="modalInput" rel="#flagsSummary" style="cursor:pointer"><img src="/FatcaOne_0/static/images/circleGreenHollow.png" width="20" height="20"></a>';
            }
            else if (overAllStatus == 'greenN') {
                rows[lastRowClicked].cells[0].innerHTML = '<a class="modalInput" rel="#flagsSummary" style="cursor:pointer"><img src="/FatcaOne_0/static/images/circleGreen.png" width="20" height="20"></a>';
            }
            comments = $('#comments').val();
            $("body").trigger(esc);
            $("#save1").trigger('click');
            redListSize = 0;
            yellowListSize = 0;
            console.log("save clicked");
        });

when the value of the variable overAllStatus is yellow as tested in the JS console and I see this in the console just before I click the 'save' button:

> overAllStatus
"yellow"
> overAllStatus == 'yellow'
true

I only see "save clicked" printed in the console. It seems like the code in the test condition (overAllStatus == "yellow") doesn't execute. I don't understand why.

Answer 1

try this replace your code with this one and see what value does "overAllStatus" has within your 'click' callback

$('#save').click(function () {
            console.log("overAllStatus", overAllStatus);  //use this to check the value of overAllStatus

            if (overAllStatus == 'red') {
                rows[lastRowClicked].cells[0].innerHTML = '<a class="modalInput" rel="#flagsSummary" style="cursor:pointer"><img src="/FatcaOne_0/static/images/circleRed.png" width="20" height="20"></a>';
            }
            else if (overAllStatus == "yellow") {
                rows[lastRowClicked].cells[0].innerHTML = '<a class="modalInput" rel="#flagsSummary" style="cursor:pointer"><img src="/FatcaOne_0/static/images/circleYellow.png" width="20" height="20"></a>';
                console.log('Over all status is yellow.');
            }
            else if (overAllStatus == 'greenR') {
                rows[lastRowClicked].cells[0].innerHTML = '<a class="modalInput" rel="#flagsSummary" style="cursor:pointer"><img src="/FatcaOne_0/static/images/circleGreenHollow.png" width="20" height="20"></a>';
            }
            else if (overAllStatus == 'greenN') {
                rows[lastRowClicked].cells[0].innerHTML = '<a class="modalInput" rel="#flagsSummary" style="cursor:pointer"><img src="/FatcaOne_0/static/images/circleGreen.png" width="20" height="20"></a>';
            }
            comments = $('#comments').val();
            $("body").trigger(esc);
            $("#save1").trigger('click');
            redListSize = 0;
            yellowListSize = 0;
            console.log("save clicked");
        });