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函数按下img标签上的按钮showSurpriseImage2()时，它不会播放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，在本例中是一个动画香蕉，并删除showSurprisemage2单击处理程序，并将一个新的单击处理程序附加到showSurpriseImage 3。当再次单击图像时，过程相反——显示新的gif，删除showSurpriseImage3单击处理程序，重新附加showSurpriseImage 2。

这绝不是最有效的方法——每次都要重新加载图像资源，并且在多个地方编写相同的代码，这违反了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>