change bootstrap glyphicon depending on status

Question

Im trying to change my glyphicon depending on the StatusLineId but none of the glyphicons appear. What am I doing wrong?

HTML Code:

<div>
    <div id="status-icon" data-bind="visible: statusIcon" style="float:left;width:30px;">
        <span class="glyphicon"></span>
    </div>
</div>

Js Function

function statusIcon() {
    if (StatusLineId == 1) {
        $("#status-icon").find(".glyphicon").addClass("glyphicon-remove");
    }
    else if (StatusLineId == 11) {
        $("#status-icon").find(".glyphicon").addClass("glyphicon-chevron-up");
    }
    else {
        $("#status-icon").find(".glyphicon").addClass("glyphicon-flash"); 
    }
}

Answer 1

I tried the following code and it worked. Just change the 'StatusLineId' value and test in fiddle.

<div>
    <div id="status-icon" data-bind="visible: statusIcon" style="float:left;width:30px;" onClick="statusIcon();">here
        <span class="glyphicon"></span>
    </div>
 </div>


    $( document ).ready(function() {
 var StatusLineId = 0
    if (StatusLineId == 1) {
    //alert('remove');
        $("#status-icon span").toggleClass('glyphicon-arrow-right').toggleClass('glyphicon-remove')
}
    else if (StatusLineId == 11) {
        $("#status-icon span").toggleClass('glyphicon-arrow-right').toggleClass('glyphicon-chevron-up')
}
    else {
        $("#status-icon span").toggleClass('glyphicon-arrow-right').toggleClass('glyphicon-flash');

}

});

https://jsfiddle.net/tsscrpn6/

Answer 2

StatusLineId is neither declared nor passed as a parameter to the statusIcon() function.

Declare StatusLineId inside the function and try. It works.