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

Question

I'm trying to change the src attribute of an image each time a button is clicked, and when the last image appears, then it resets and displays the initial image.

I get the src attribute of the image, and update it to new image, but the image does not change.

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

Could you help me please? Thanks in advance.

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

You need to update src property also i.e. document.querySelector("#myImg").src = imgSrc — Satpal
– Satpal, Commented Feb 21, 2018 at 12:46
This statement : var imgSrc = document.querySelector("#myImg").src; wil copy the value, since it's a string. You have a set the value directly : document.querySelector("#myImg").src = "./whatever.png" — Seblor
– Seblor, Commented Feb 21, 2018 at 12:47

Nikhil Aggarwal · Accepted Answer · 2018-02-21 12:52:10Z

You were updating the value in a variable, which does not get reflected in your HTML.

Update

imgSrc = images[i];

to

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

Working Version

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

Munim Munna · Accepted Answer · 2018-02-25 17:30:34Z

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>

Zenoo · Accepted Answer · 2018-02-21 12:47:07Z

0

You could do this in a way simpler way. Juste keep track of which image from images is currently displayed with i.

Whenever the image changes, increment i. If i reached the end of images, reset it to 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>

answered Feb 21, 2018 at 12:47

Zenoo

12.9k4 gold badges48 silver badges71 bronze badges

Comments

tobsen · Accepted Answer · 2018-02-21 13:23:45Z

0

Try this

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

you can't save a var like you did: var imgSrc = document.querySelector("#myImg").src;

just use it directly. hope I could help!

greetings

answered Feb 21, 2018 at 13:23

tobsen

9610 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related