undefined variable when using setInterval

Question

I am trying to build a website with a background that switches images every five seconds. I use javascript to achieve this. After some fiddling around i stumbled upon what seems to be a scope issue, as it keeps telling me that the var imageCount is undefined. i am a bit of a newbie regarding javascript and stackoverflow and i appreciate any help i could get.

html

<body>

    <div id="overlay">




    </div>

    <script>




        window.setInterval(execute, 5000);

        var imageCount;

        function execute() {

            console.log("bla");





                if(imageCount == 0){
                    document.body.style.backgroundImage = "url('huis1.jpg')";
                    console.log("huis1");
                }

                else if(imageCount == 1){
                    document.body.style.backgroundImage = "url('huis2.jpg')";
                    console.log("huis2");
                }

                else if(imageCount == 2){
                    document.body.style.backgroundImage = "url('huis3.jpg')";
                    console.log("huis3");
                    imageCount = 0;
                }

                console.log(imageCount);



        }

    </script>

</body>

i would like to also post the CSS to this file but i wouldn't know how to do it if my life depended on it.

Your code never sets imageCount to a value, so it's undefined. — Pointy
– Pointy, Commented Apr 10, 2015 at 23:11
you set imageCount 0 when it equals 2... but it never becomes 2... — dolek
– dolek, Commented Apr 10, 2015 at 23:13
@Strixy that is not necessary, as JavaScript will do that implicitly. — Pointy
– Pointy, Commented Apr 10, 2015 at 23:26

user1832200 · Accepted Answer · 2015-04-11 05:50:41Z

2

You don't need the global variable imageCount for this implementation.
It can easily be done using a closure
See code below:

window.setInterval(execute(), 5000);

function execute() {
    var imageCount = 0;
    return function() {
        console.log("bla");
        if(imageCount == 0){
            document.body.style.backgroundImage = "url('huis1.jpg')";
            console.log("huis1");
            imageCount = 1;
        } else if(imageCount == 1){
            document.body.style.backgroundImage = "url('huis2.jpg')";
            console.log("huis2");
            imageCount = 2;
        } else if(imageCount == 2){
            document.body.style.backgroundImage = "url('huis3.jpg')";
            console.log("huis3");
            imageCount = 0;
        }
        console.log(imageCount);
    }
}

answered Apr 11, 2015 at 5:50

user1832200

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

Comments

MamaWalter · Accepted Answer · 2015-04-10 23:37:55Z

1

As mention in the comment you have to initialise your variable. You also have to increment your index each iteration, and if you only change the background you maybe not need the if.

var imageCount = 0; // initialise your index variable

function execute() {
  // increment your index if value is less than 2 otherwise set it to 0
  imageCount = (imageCount >= 2) ? 0 : ++imageCount;
  // concate your image name with the index value
  document.body.style.backgroundImage = "url('huis" + (imageCount + 1)+ ".jpg')";
}

window.setInterval(execute, 5000);

edited Apr 10, 2015 at 23:37

answered Apr 10, 2015 at 23:31

MamaWalter

2,1131 gold badge19 silver badges27 bronze badges

Collectives™ on Stack Overflow

undefined variable when using setInterval

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related