Javascript：関数を使用するとイメージは変更されません。

Question

<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; 


    } 


} 
} 

上記のコードは、ユーザーエントリが保存された正解と一致する場合に表示されるイメージを変更するために使用しています。問題は、ソースの属性が変更されても、元のイメージが変更されているにもかかわらず、新しいイメージの代わりに古いイメージが使用されていることです。私はテストとしていくつかの他の画像を試してみました。うまくいきました。新しいGIF画像に変更することはできません。

すべてのヘルプは

Answer 1

をいただければ幸いにこれを試してみてください。

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

とを：

document.getElementById("viewport").src="/wEBgIFS/real_animation1.gif"