Question

I’ve a problem with set a limit into my own lightbox for a gallery

    <script>


var imagenumber = 0;

    function btnleft(){
        load = imagenumber-=1;
        document.getElementById('lightboxcontent').innerHTML=imagelist[load];

        }

function btnright(){
    load = imagenumber+=1;
    if (load==undefined){load=imagenumber-=1}
    document.getElementById('lightboxcontent').innerHTML=imagelist[load];
    }
</script>

Then the array

var imagelist=new Array(); // regular array (add an optional integer
imagelist[0]="image1.jpg";       // argument to control array's size)
imagelist[1]="image2.jpg";
imagelist[2]="image3.jpg";

When I click more then 3 times on the next button I got the error-message “undefined”.
How should I do to get a limit on my arrays?

Answer 1

Try it with

 function btnleft(){
    var load = imagelist[imagenumber-=1];
    if (load) // imagenumber in array boundaries
        document.getElementById('lightboxcontent').innerHTML = load;
    else
        imagenumber = 0;
 }
 function btnright(){
    var load = imagelist[imagenumber+=1];
    if (load) // imagenumber in array boundaries
        document.getElementById('lightboxcontent').innerHTML = load;
    else
        imagenumber = imagelist.length-1;
 }

Yet, Arrays in Javascript have no limited size, they are more like (infinite) lists. You can hardly set a limit on their length – espcially not with the constructor, whose number argument is just for initialisation purposes.

You can use the length property of an array to check whether your index is in the array boundaries: i >= 0 && i < arr.length. My code just checks whether there is an item at that index (as your second function seems to intend, too) and resets the index otherwise.