CODEWITHSUNDEEP
javascript
Martin Ďurický
Martin Ďurický

Reputation: 27

Javascript changing IMG not working

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

Upvotes: 0

Views: 195

Answers (1)

Snowmonkey
Snowmonkey

Reputation: 3761

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>

Upvotes: 1

Related Questions