使用JavaScript在點擊時切換CSS背景顏色

Question

我一直在使用此腳本在單擊時切換CSS背景顏色，並且嘗試添加第三種顏色選項，但似乎無法使其正常工作。 任何人都可以幫助獲得第三種顏色嗎？

這是我的jsfiddle鏈接：

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

謝謝，

詹姆士

Answer 1

您可以使用模數運算符（％）：

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

試試這個jsfiddle：

三種顏色

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