CODEWITHSUNDEEP
javascripthtmlcss
Brian W Willmott
Brian W Willmott

Reputation: 21

Change a div background image using javascript if/else

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>

Upvotes: 1

Views: 1561

Answers (2)

chazsolo
chazsolo

Reputation: 8484

As far as syntax issues go:

  1. As @Zee stated, If should be lowercase (if)

  2. Also, as @Zee and some others stated, you are not closing function displayNextImage() { with a closing brace }.

  3. 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().

  4. You are never calling your timeout function, startTimer.

  5. You create a new array imageArray but then use an undeclared array images

Upvotes: 0

Zee
Zee

Reputation: 8488

  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.

Upvotes: 2

Related Questions