Javascript: image won't change when using function

<img id="viewport" src="wEBgIFS/real_animation0.gif" class="img-responsive">

 <textarea id="user_entry" class="form-control" placeholder="Type here...">
            </textarea>
            <button id="sub-button" onClick="check_text('user_entry')" type="button" class="btn btn-primary btn-block" > Submit</button>



var display_text = new Array("Say ('Yes')","bag =['wand of wander','fist of fortitude','gun of colour']","bag.remove('wand of wander')","While: ");

var display_counter = 0;

var entry_text =1;


function check_text(id){
if (document.getElementById(id).value.trim() == display_text[display_counter]){
    display_counter ++;
    entry_text ++;

    //var n = display_counter.toString();


    switch(display_counter){
        case 1:
            document.getElementById("viewport").src="wEBgIFS/real_animation1.gif"
            break;


    }


}
}

The above code is what I am trying to use to change an image being displayed if the user entry matches the stored correct answers. The problem is, although the source attribute of the image changes, the old image is used in place of the new one, despite the source being correct, and i can't for the life of me understand why. I tried some other images as tests, and it works fine, it just won't let me change to a new gif image.

Any help would be appreciated