Javascript variable is undefined

Question

<html>
<head>
    <title>Array of images</title>
    <script type="text/javascript">
        var myPics = new Array[3];
        myPics[0] = "./img/blue.png";
        myPics[1] = "./img/red.png";
        myPics[2] = "./img/yellow.png";
        var counter = 0;

        function preImg(){
        alert(counter);
            if(counter == 0)
                counter = 4;

            counter --;
        alert(counter);
            document.getElementById("coloredImg").src = myPics[counter];
        }

        function nextImg(){
            if(counter == 3)
                counter = -1;

            counter ++;

            document.getElementById("coloredImg").src = myPics[counter];
        }
    </script>
</head>
<body>
    <img src="./img/blue.png" id="coloredImg" alt="Image not found"/>
    <input type="button" onclick="preImg()" value="Previous"/>
    <input type="button" onclick="nextImg()" value="Next"/>
</body>
</html>

The problem I encounter is that my counter variable is undefined inside the function. For example when I call the function preImg it alerts me with undefined (when it should be just 0) and the second alert show NaN when it should be a 3. Why my function doesnt recognize my "var counter" it is global isnt it? Do you think the same happens with the variable mypics. Thanks!

score 8 · Answer 1 · edited May 23 '17 at 12:13

new Array[3];

should be

new Array(3);

But rather, use the square bracket notation to create an array (there's no need to specify the length either):

var myPics = [];

Why use this syntax you may ask? There are many reasons:

[] is a faster and shorter way of creating an array.
The Array constructor can be overridden while a syntactical construct like this cannot.
It's much easier to spot in code, making debugging easier.
It has the ability to take a single element (i.e [5]) and not interpret it as the length of the array, a common problem with the cumbersome Array constructor.

score 4 · Answer 2 · answered Dec 22 '12 at 15:06

4

var myPics = new Array[3]; should be var myPics = new Array(3);

JsFiddle: http://jsfiddle.net/cbJAc/

answered Dec 22 '12 at 15:06

extramaster

2,635
2
23
28

Tomalak · Answer 3 · 2012-12-22T16:19:34.293

Simple slideshow object using a closure over element, pics and counter:

function Slideshow(element, pics) {
    var counter = 0;

    this.nextImg = function () {
        element.src = pics[counter];
        counter = (counter + 1) % pics.length;
    }
    this.nextImg(); // init
}

usage:

var show = new Slideshow(
    document.getElementById("coloredImg"),
    ["./img/blue.png", "./img/red.png", "./img/yellow.png"]
);

show.nextImg(); // red
show.nextImg(); // yellow
show.nextImg(); // blue

Closures make sure that every variable that's in scope when a function is defined will still be in scope when the function is called (or called again). This standard JavaScript technique elegantly solves your counter issue.

Using a modulus based calculation lets the counter repeat the sequence 0,1,2 (in this example).

Edit: Assume you would want to switch to a new image every three seconds:

setInterval(show.nextImg, 3000);

Javascript variable is undefined

3 Answers3