的Javascript改变IMG不工作

嗨，我有这个JavaScript的Javascript改变IMG不工作

<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

来源

2017-10-19 Martin Ďurický

粘贴HTML以及 –

请让你的代码片段或发布的jsfiddle ... – void

http://americafulfillment.com/#section2这里我的网站链接 –

好吧，我看不到链接回你的网站的相关性，除非你自我推销的按钮。从上面所描述的内容来看，我没有看到你想要做什么的例子。

为了确保我明白你想要做什么，第一个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>

来源

2017-10-19 19:42:54 Snowmonkey

的Javascript改变IMG不工作

回答

相关问题