Switch CSS background colour on click using Javascript

Question

I have been using this script to switch CSS background colour on click and I am trying to add a third colour option but can't seem to get it working. Can anyone help to get the third colour to work?

Here is my jsfiddle link:

https://jsfiddle.net/pkrWV/70/

var bodyObj, className, index;

bodyObj = document.getElementById('body');
index = 1;
className = [
    'imageOne',
    'imageTwo',
     'imageThree',
];

function updateIndex(){
    if(index === 0){
        index = 1;
    }else{
        index = 0;
    }
}

bodyObj.onclick = function(e){
    e.currentTarget.className = className[index];
    updateIndex();
}

Thanks,

James

Answer 1

You can use modulus operator (%):

function updateIndex(){
    index = (index+1)%(className.length);   
}

JSFiddle: https://jsfiddle.net/pkrWV/71/

Answer 2

https://jsfiddle.net/pkrWV/72/

function updateIndex(){
    if(index === className.length-1){
        index = 0;
    }else{
        index = index+1;
    }
}

Answer 3

Try this jsfiddle:

three colors

var bodyObj, className, index;

bodyObj = document.getElementById('body');
index = 1;
className = [
    'imageOne',
    'imageTwo',
     'imageThree',
];

function updateIndex(){
    index++;
    if (index===3) {
        index = 0;
    }
}

bodyObj.onclick = function(e){
    e.currentTarget.className = className[index];
    updateIndex();
}