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，但是当我按下img标签上的按钮时，用onclick函数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，在本例中为动画香蕉，并删除showSurpriseImage2单击处理程序，并将新的单击处理程序附加到showSurpriseImage3。再次单击图像时，进程反转 - 显示新的gif，删除showSurpriseImage3单击处理程序，重新附加showSurpriseImage2。

这绝不是最有效的方法 - 每次都会重新加载图像资源，并且在多个位置编写相同的代码，违反了DRY规则。但是，根据你所描述的，它确实是你想要的。

＆＃13;

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);

＆＃13;

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

＆＃13;

<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>

＆＃13;

Javascript更改IMG无效

1 个答案: