CODEWITHSUNDEEP
javascripthtml
Trevor Fisher
Trevor Fisher

Reputation: 21

Javascript changing an image within a div after a certain amount of time

I am currently making a web page with an image inside of a div tag. I wrote a script to change the image after a certain amount of time, and it works fine when I test the script alone, however; when I attempt to place the script within my web page, it does not change the image.

Here is the code for my script:

<!DOCTYPE html>
<html>
    <body>
        <script>
            images = new Array;
            images[0] = "img2.gif";
            images[1] = "img3.gif";
            images[2] = "img4.gif";
            images[3] = "img5.gif";
            images[4] = "img6.gif";
            images[5] = "img7.gif";
            images[6] = "img8.gif";
            images[7] = "img9.gif";
            images[8] = "img10.gif";

            setInterval( function() {
                changeImage()
            }, 5000);

            x = 0;

            function changeImage() {
                document.getElementById('ad').src = images[x];

                if ( x < 8 ) {
                    x += 1;
                } else if ( x = 9 ) {
                    x = 0;
                }
            }
        </script>

        <img id='ad' src="img.gif">
    </body>
</html>

I have tested this script with the image inside of a div tag and it still works fine. When I put the same code into my web page, it does not work. Also note, the image file names are just examples. The images I am using are from photobucket, so I have very little control over what they are called. Any help I could get on this would be greatly appreciated.

Upvotes: 2

Views: 11321

Answers (3)

Willem Ellis
Willem Ellis

Reputation: 5016

You need to put your code inside window.onload = function() {}

var images = new Array();
images[0] = "img2.gif";
images[1] = "img3.gif";
images[2] = "img4.gif";
images[3] = "img5.gif";
images[4] = "img6.gif";
images[5] = "img7.gif";
images[6] = "img8.gif";
images[7] = "img9.gif";
images[8] = "img10.gif";

function changeImage() {
  document.getElementById('ad').src = images[x];
  if (x<8) {
    x+=1;
  }

  else if (x===9) {
    x=0;
  }
}

window.onload = function() {
  var x = 0;
  setInterval(function() {
    changeImage()
  },5000);
}

Edit

This code has been tested on my local machine and works.

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
      var images = new Array();
      for (var i = 2; i < 11; i++) {
        images.push("img" + i + ".gif");
      }
      var x = 0;

      function changeImage() {
        document.getElementById('ad').src = images[x];
        document.getElementById('imgsrc').innerHTML = "<h1>" + images[x] + "</h1>";
        if (x < 8) {
          x += 1;
        } else {
          x = 0;
        }
      }
      window.onload = function() {
        setInterval(function () {
          changeImage();
        }, 1000);
      }
    </script>
  </head>
  <body>
    <img id="ad" src="img.gif" />
    <div id="imgsrc"><h1>img.gif</h1></div>
  </body>
</html>

Here is a fiddle of the final code working. JSFiddle doesn't like window.onload for some reason, so I had to exclude it. This doesn't really demonstrate my point, but I thought I'd just include it anyway.

Upvotes: 2

user2544708
user2544708

Reputation: 93

Try to rename your variables images and x to longer names. What can happen is, if some other code in your page, or worse, some code in one of the script file you page references, use variable "x" without declare it locally, then it would actually modify your "x" variable.

Here is an example to demonstrate the problem:

function something()
{
  for (x = 0; i < 10; x++)
    dosomethingelse();
}

If the above function is called in your page, then it will overwrite your "x" variable. The following code is safe:

function something()
{
  var x;
  for (x = 0; i < 10; x++)
    dosomethingelse();
}

Upvotes: 0

Samuel Reid
Samuel Reid

Reputation: 1756

Your code works to change the image src in this fiddle: http://jsfiddle.net/snB2a/1/

Upvotes: 0

Related Questions