的Javascript改變IMG不工作

Question

嗨，我有這個JavaScript

<script> 
    function showSurpriseImage() { 
    var x = document.createElement("IMG"); 
    x.setAttribute("id", "boxmm"); 
    x.setAttribute("class", "boxmm"); 
    x.setAttribute("src", "images/mese.gif"); 
    x.setAttribute("onclick", "showSurpriseImage2();PlayedSound2();"); 
    document.getElementById("surprise").appendChild(x); 
    } 
</script> 

<script> 
    function showSurpriseImage2() { 
    var x = document.getElementById("boxmm"); 
    x.setAttribute("src", "images/source.gif"); 
    x.setAttribute("onclick", "showSurpriseImage3();PlayedSound2()"); 
    x.setAttribute("class", "boxml"); 
    x.setAttribute("id", "boxml"); 
    } 
    </script> 

    <script> 
    function showSurpriseImage3() { 
    var x = document.getElementById("boxml"); 
    x.setAttribute("src", "images/source.gif"); 
    x.setAttribute("onclick", "showSurpriseImage3();PlayedSound2()"); 
    x.setAttribute("class", "boxml"); 
    x.setAttribute("id", "boxml"); 
    } 
    </script> 

其點擊的是IMG後更改GIF，但是當我按上的onclick功能showSurpriseImage2（）img標籤按鈕{它不會發揮source.gif但是再次使用第一個GIF，然後它會播放source.gif。我無法找到問題。由於

HTML 這是滋生第一GIF（showSurpriseImage）

<a class="boxmb" href="#section2"><img class="boxmb" id="boxmb" id="togglee" 
src="images/box1.png" id="image1" 
onclick="showButton();diffImage(this);showSurpriseImage();PlaySound();" > 
</a> 

The site is not responsive yet so you wont see it properly 
http://americafulfillment.com/#section2 

Answer 1

好吧，我看不到鏈接回你的網站的相關性，除非你自我推銷的按鈕。從上面所描述的內容來看，我沒有看到你想要做什麼的例子。

爲了確保我明白你想要做什麼，第一個showSurpriseImage是用來產生一個圖像元素，並且對新創建元素的任何後續點擊應該只會影響這個新元素？你試圖讓新元素在兩個動畫GIF之間切換？

點擊開始按鈕觸發點擊處理程序（從內聯移動到addEventListener，我自己的首選項），這會創建一個新的圖像來處理點擊自身。單擊時，它將運行showSurpriseImage2（在本例中爲動畫香蕉），並刪除showSurpriseImage2 click處理程序，並將新的Click處理程序附加到showSurpriseImage3。當圖像被再次點擊時，過程被顛倒 - 顯示新的gif，showSurpriseImage3點擊處理程序被移除，showSurpriseImage2被重新附加。

這絕不是最有效的方法 - 每次都會重新加載圖像資源，並且在多個位置寫入相同的代碼，違反了DRY規則。但是，從你所描述的情況來看，你想要什麼。

var showSurpriseImage = function() { 
 
    document.getElementById("boxmb").removeEventListener("click", showSurpriseImage); 
 
    var x = document.createElement("IMG"); 
 
    x.setAttribute("id", "boxmm"); 
 
    x.setAttribute("class", "boxmm"); 
 
    x.setAttribute("src", "https://thumbs.dreamstime.com/t/do-red-button-isolated-white-background-56575889.jpg"); 
 
    document.getElementById("surprise").appendChild(x); 
 
    x.addEventListener("click", showSurpriseImage2); 
 
} 
 

 

 
var showSurpriseImage2 = function() { 
 
    var x = document.getElementById("boxmm"); 
 
    x.setAttribute("src", "http://media.idownloadblog.com/wp-content/uploads/2016/11/Animated-GIF-Banana.gif"); 
 
    x.setAttribute("class", "boxml"); 
 
    x.setAttribute("id", "boxml"); 
 
    x.removeEventListener("click", showSurpriseImage2); 
 
    x.addEventListener("click", showSurpriseImage3); 
 
} 
 

 
var showSurpriseImage3 = function() { 
 
    var x = document.getElementById("boxml"); 
 
    x.setAttribute("src", "http://www.thisiscolossal.com/wp-content/uploads/2014/03/120515.gif"); 
 
    x.setAttribute("class", "boxmm"); 
 
    x.setAttribute("id", "boxmm"); 
 
    x.removeEventListener("click", showSurpriseImage3); 
 
    x.addEventListener("click", showSurpriseImage2); 
 
} 
 

 
var startEl = document.getElementById("boxmb"); 
 
startEl.addEventListener("click", showSurpriseImage);

.boxmb { 
 
    width: 50px; 
 
} 
 

 
.boxml, 
 
.boxmm { 
 
    width: 200px; 
 
}

<a class="boxmb" href="#section2"> 
 
    <img class="boxmb" id="boxmb" id="togglee" src="https://maxcdn.icons8.com/Android_L/PNG/512/Media_Controls/youtube_play-512.png" id="image1"> 
 
</a> 
 
<div id="surprise"> 
 

 
</div>