Javascript changing IMG not working

Question

Hi i have this 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>

Its changing GIF after clicking on that img, but when i press button on img tag with onclick function showSurpriseImage2() { it wont play source.gif but the first GIF again and then it will play source.gif. I cant find the problem. Thanks

HTML This is the button that spawns the first 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

americafulfillment.com/#section2 Here my link to the website — Martin Ďurický
– Martin Ďurický, Commented Oct 19, 2017 at 19:27
It seems to me that the issue is the removeEventListener bit -- by not removing the existing event listener, any more added are simply being added to a queue on the element. Thus, when you click, you're getting the first listener, then the second. — Snowmonkey
– Snowmonkey, Commented Oct 19, 2017 at 20:15

Snowmonkey · Accepted Answer · 2017-10-19 19:42:54Z

Okay, I fail to see the relevance of linking back to your website, unless you're self-promoting. I don't see an example there of what it is you're trying to do, from what you describe above.

To be sure I understand what you're trying to do, the first showSurpriseImage is intended to spawn an image element, and any subsequent clicks on the newly created element should only affect this new element? And you're trying to cause the new element to toggle between two animated gifs?

Clicking on the start button triggers the click handler (moved from inline to an addEventListener, my own preference), which creates a new image that will handle the click on itself. When clicked, it will run showSurpriseImage2, in this case an animated banana, and remove the showSurpriseImage2 click handler, and attach a new click handler to showSurpriseImage3. When the image is clicked again, the process is reversed -- new gif displayed, showSurpriseImage3 click handler removed, showSurpriseImage2 re-attached.

This is by no means the most efficient way of doing this -- the image resources are being reloaded every time, and the same code is written in multiple places, violating the DRY rule. But it does, from what you described, what you want.

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>

Collectives™ on Stack Overflow

Javascript changing IMG not working

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related