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"

Javascript：使用函数

1 个答案: