Question

I’m trying to create a gallery script with JS (I’ve only been learning for a week so please excuse if I’ve made any ridiculous mistakes!). When I run the code, I get an error for controlLeft.onclick = changeImage(--);, saying ( is an unexpected token.

By my untrained eye everything should be fine, but evidently not. What have I done wrong here:

//Javascript Image Changer

var currentImage = document.getElementById("currentImage");

var imageArray = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg"];

var imageIndex= 0;

function changeImage(param){
    currentImage.setAttribute("src", imageArray[imageIndex]);
    imageIndex[param];
    if (imageIndex >= imageArray.length){
        imageIndex = 0;
    }else if(imageIndex <= -1){
        imageIndex = imageArray.length + 1;
    }
}

var controlLeft = document.getElementById("left");
var controlRight = document.getElementById("right");

controlLeft.onclick = changeImage(--);
controlRight.onclick = changeImage(++);

Answer 1

You can’t just pass operators around like other things. Even in a programming language with higher-order functions the same thing usually does not apply to operators.

Besides that, onclick expects a function – not the result of a function call.

Here’s a snippet that is likely to work:

function changeImage(mod){
    currentImage.setAttribute("src", imageArray[imageIndex]);
    imageIndex += mod;
    if (imageIndex >= imageArray.length){
        imageIndex = 0;
    }else if(imageIndex <= -1){
        imageIndex = imageArray.length + 1;
    }
}

var controlLeft = document.getElementById("left");
var controlRight = document.getElementById("right");

controlLeft.onclick = function() { changeImage(-1); };
controlRight.onclick function() { changeImage(1); };