背景顏色不變

Question

這是我的代碼，當我單擊按鈕（btnColor）時，它僅顯示數組中的最后一種顏色，並且不起作用

var color = ["#222F3E","#F368E0","#EE5253","#ABDE3","#10AC84","#222F3E","#5F27CD","pink"];
var btnColor = document.getElementById("color_change");


btnColor.addEventListener("click", function() {

    for(var i = 0; i < color.length; i++) {
        document.querySelector("body").style.background = color[i];
    }
})

Answer 1

它會循環顯示所有顏色，但是當您按下按鈕時會立即發生。

需要說明的是：它循環遍歷所有內容，但是發生得太快了，您看不到。

如果要在按下按鈕時使背景循環一次，請使用以下代碼。

var color = ["#222F3E","#F368E0","#EE5253","#ABDE3","#10AC84","#222F3E","#5F27CD","pink"];
var btnColor = document.getElementById("color_change");
var colorI = 0;

btnColor.addEventListener("click", function() {

    document.querySelector("body").style.background = color[colorI];
    colorI++;
    colorI = colorI % color.length;
})

Answer 2

而不是循環，添加變量colorIndex ，並在每次單擊按鈕后將其遞增，然后檢查是否到達末尾，將其重置為0 ：

 var color = ["#222F3E", "#F368E0", "#EE5253", "#ABDE3", "#10AC84", "#222F3E", "#5F27CD", "pink"]; var btnColor = document.getElementById("color_change"); var colorIndex = 0; btnColor.addEventListener("click", function() { if (colorIndex === color.length) colorIndex = 0; document.querySelector("body").style.background = color[colorIndex++]; }) 

 <button id="color_change">Click me</button>