JavaScript 设置 Image/Element source/attribute 未更新 Image/Element

Question

我试图在每次单击按钮时更改图像的 src 属性，当最后一个图像出现时，它会重置并显示初始图像。

我获取了图片的src属性，更新为新图片，但是图片没有变化。

  var imgSrc = document.querySelector("#myImg").src;
  imgSrc = images[i]; /* Is not working */

你能帮帮我吗？提前致谢。

<!DOCTYPE html>
<html>

<head></head>

<body>

  <img width="60%" id="myImg" src="https://i.imgur.com/TiipKoJ.gif"/>
  <br><br>
  <button onclick="changeImg ()">Change Image</button>

  <script>
    var i = 0, images = ["https://i.imgur.com/TiipKoJ.gif", "https://i.imgur.com/QHOn5G9.gif", "https://i.imgur.com/wRbhXbc.gif", "https://i.imgur.com/wbegtAO.gif", "https://i.imgur.com/UIXLgFX.gif"];

    function changeImg() {
      var imgSrc = document.querySelector("#myImg").src;

      if (i < 3) {
        i++;
        imgSrc = images[i];
      } else {
        i = 0;
        imgSrc = images[i];
      }
    }
  </script>
</body>

</html>

Answer 1

您正在更新变量中的值，这不会反映在您的 HTML 中。

更新

imgSrc = images[i];

到

document.getElementById("myImg").setAttribute("src", images[i]);

工作版本

<!DOCTYPE html>
<html>

<head></head>

<body>

  <img width="60%" id="myImg" src="https://i.imgur.com/TiipKoJ.gif"></img>
  <br><br>
  <button onclick="changeImg ()">Change Image</button>


  <script>
    var i = 0;

    function changeImg() {
      var img = document.getElementById("myImg"); // get the element
      var images = ["https://i.imgur.com/TiipKoJ.gif", "https://i.imgur.com/QHOn5G9.gif", "https://i.imgur.com/wRbhXbc.gif", "https://i.imgur.com/wbegtAO.gif", "https://i.imgur.com/UIXLgFX.gif"];

      if (i < 3) {
        i++;
      } else {
        i = 0;
      }
     // you can move the setAttribute statement after if/else block.
      img.setAttribute("src", images[i]); 

    }
  </script>
</body>

</html>

Answer 2

你可以用更简单的方式来做到这一点。只需跟踪 images 中的哪个图像当前显示为 i。

每当图像发生变化时，递增 i。如果 i 到达 images 的末尾，将其重置为 0。

var i = 0;
var images = ["https://i.imgur.com/TiipKoJ.gif", "https://i.imgur.com/QHOn5G9.gif", "https://i.imgur.com/wRbhXbc.gif", "https://i.imgur.com/wbegtAO.gif", "https://i.imgur.com/UIXLgFX.gif"];

function changeImg() {
  if(i<images.length) i++;
  else i=0;
  document.querySelector("#myImg").src = images[i];
}

<img width="60%" id="myImg" src="https://i.imgur.com/TiipKoJ.gif"></img>
<br><br>
<button onclick="changeImg ()">Change Image</button>

Answer 3

What your code does

  var imgSrc = document.querySelector("#myImg").src;
  /* store src attribute of the image in a variable named imgSrc */

  imgSrc = images[i];
  /* store new image in variable imgSrc */

What you need to do

  var img = document.querySelector("#myImg");
  /* store object reference of the image in a variable named img */

  img.src = images[i];
  /* update src attribute of the image by object reference stored in variable img */

<!DOCTYPE html>
<html>

<head></head>

<body>

  <img width="60%" id="myImg" src="https://i.imgur.com/TiipKoJ.gif">
  <br><br>
  <button onclick="changeImg ()">Change Image</button>


  <script>
    var i = 0, images = ["https://i.imgur.com/TiipKoJ.gif", "https://i.imgur.com/QHOn5G9.gif", "https://i.imgur.com/wRbhXbc.gif", "https://i.imgur.com/wbegtAO.gif", "https://i.imgur.com/UIXLgFX.gif"];

    function changeImg() {
      var img = document.querySelector("#myImg");

      if (i < 3) {
        i++;
        img.src = images[i];
      } else {
        i = 0;
        img.src = images[i];
      }
    }
  </script>
</body>

</html>

Answer 4

试试这个

<!DOCTYPE html>
<html>
<head></head>
<body>

<img width="60%" id="myImg" src="https://i.imgur.com/TiipKoJ.gif"></img>
<br><br>
<button onclick = "changeImg()">Change Image</button>

<script>


var i = 0;

function changeImg () {
 var images = ["https://i.imgur.com/TiipKoJ.gif","https://i.imgur.com/QHOn5G9.gif","https://i.imgur.com/wRbhXbc.gif","https://i.imgur.com/wbegtAO.gif","https://i.imgur.com/UIXLgFX.gif"];
 i++;
 if (i>3) {
  i=0;
 }
 document.querySelector("#myImg").src = images[i];
}

</script>
</body>
</html>

您不能像以前那样保存 var：var imgSrc = document.querySelector("#myImg").src;

直接用就好了。希望我能帮上忙！

问候

JavaScript 设置 Image/Element source/attribute 未更新 Image/Element

JavaScript set Image/Element source/attribute is not updating the Image/Element

html

javascript

attributes

element

image