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

Chitrang · Accepted Answer · 2015-08-04 20:15:20Z

1

You can use modulus operator (%):

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

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

answered Aug 4, 2015 at 20:15

Chitrang

2,1141 gold badge17 silver badges18 bronze badges

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

1 Comment

Jevgeni Over a year ago

You can also get rid of function Fiddle e.currentTarget.className = className[index++%className.length];

dnuttle · Accepted Answer · 2015-08-04 20:18:06Z

0

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();
}

answered Aug 4, 2015 at 20:18

dnuttle

3,8402 gold badges23 silver badges19 bronze badges

1 Comment

jamesgreeny Over a year ago

This is perfect! Is it possible to make the red above on hover and the black appear on click?

stackoverfloweth · Accepted Answer · 2015-08-04 20:13:39Z

0

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

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

answered Aug 4, 2015 at 20:13

stackoverfloweth

6,9275 gold badges44 silver badges75 bronze badges

Collectives™ on Stack Overflow

Switch CSS background colour on click using Javascript

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related