使用 Javascript 在点击时切换 CSS 背景颜色

Question

我一直在使用此脚本在单击时切换 CSS 背景颜色，我正在尝试添加第三种颜色选项，但似乎无法正常工作。任何人都可以帮助使第三种颜色起作用吗？

这是我的 jsfiddle link:

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

谢谢，

詹姆斯

Answer 1

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

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

Answer 2

您可以使用取模运算符 (%):

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

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

Answer 3

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

使用 Javascript 在点击时切换 CSS 背景颜色

Switch CSS background colour on click using Javascript

javascript

css

java

background

colors