Change a div background image using javascript if/else

Question

I am trying to get the background image of a div to change at an interval. I created an Array with the images, and every few seconds the function should check the value of "x" against the array length. If X is less, x will increase by one and the background image will change to the next image in the array, otherwise it will set x=0 and restart the process. The div and initial image shows up how I want, but nothing happens.

I know there are probably better ways to do this, but I am very new to Javascript and want to learn why this code doesn't work. Thanks in advance for the help!!

<!doctype html>
<html>
   <head>
      <meta charset="utf-8" />
      <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />

       <title>ImageChanger</title>

       <style type="text/css">

       #imagediv {
            float:left;
            border-style:ridge;
            border-width:8px;
            border-color:Green;
            border-radius:15px;
            width:1250px;
            height:450px;
            background-image:url(images/landscape1.jpg)
        }

       </style>

       <script type="text/javascript">

            function  displayNextImage() {
            var x;

            If (x<imageArray.length) {
                x=x+1;
                document.getElementById("imagediv").style.backgroundImage=images[x];
            } 
            else {
                x=0;
                document.getElementById("imagediv").style.backgroundImage=images[x];
            }

            function startTimer() {
                  setInterval(displayNextImage, 3000);
            }

            var imageArray=new Array();
            images[0] = "images/landscape1.jpg";
            images[1] = "images/landscape2.jpg";
            images[2] = "images/landscape3.jpg";
            images[3] = "images/landscape4.jpg";

       </script>
   </head>

    <body>
       <div id="imagediv">
       </div>
   </body>
</html>

possible duplicate of how to change the background image of div using javascript? — Nitesh
– Nitesh, Commented May 22, 2015 at 12:23
Learn to use the JavaScript console in the browser. It will point you in the general area of the bugs. Missing a closing } and have a typo on the if. — epascarello
– epascarello, Commented May 22, 2015 at 12:24

Zee · Accepted Answer · 2015-05-22 12:23:45Z

2

  If (x<imageArray.length) {..

should be

 if (x<imageArray.length) {

Javascript is case-sensitive.

Also you have some missing braces like you are not closing

function  displayNextImage() { ....

Use your browser console to debug. These syntax errors will be shown there.

edited May 22, 2015 at 12:23

answered May 22, 2015 at 12:22

Zee

8,4805 gold badges39 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

chazsolo · Accepted Answer · 2015-05-22 13:11:46Z

0

As far as syntax issues go:

As @Zee stated, If should be lowercase (if)
Also, as @Zee and some others stated, you are not closing function displayNextImage() { with a closing brace }.
You are improperly defining the background-image property in your function, whereas you defined it correctly in the block of CSS. You must wrap the image name with url().
You are never calling your timeout function, startTimer.
You create a new array imageArray but then use an undeclared array images

answered May 22, 2015 at 13:11

chazsolo

8,6541 gold badge25 silver badges45 bronze badges

Collectives™ on Stack Overflow

Change a div background image using javascript if/else

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related