为什么[i]的值会立即使用for-loop跳转到数组的末尾？

问题描述

尝试制作一个简单的JS，以便在按下按钮时它会提示“你点击它”，它会改变按钮中文本的颜色。 它立即转到数组中的最后一种颜色。 我希望它逐渐增加，这样每次点击它，它都会前进不同的颜色。

var buttonState = document.getElementById("clickButton");

var colorArray = ["red", "blue", "green", "black", "purple", "yellow", "pink", "orange"];

//on click alert user and change color

buttonState.onclick = function() {
    alert ("You clicked it.");
    for (var i = 0; i < colorArray.length; i++) {
    colorChange = colorArray[i];
    buttonState.style.color = colorChange;
    }
}

你很快就会遍历所有颜色，总是在最后一个颜色上结束。 这是一个确保颜色从头到尾无限旋转的解决方案。

小提琴： ： 。

JS：

var buttonState = document.getElementById("clickButton");

var colorArray = ["red", "blue", "green", "black", "purple", "yellow", "pink", "orange"];

var colorStart = 0;

buttonState.onclick = function() {
    alert ("You clicked it.");
    colorStart %= colorArray.length;
    buttonState.style.color = colorArray[colorStart++];
}

我认为它正在迭代所有元素，但它执行得如此之快，以至于你没有看到所有的颜色。 相反，您只能看到循环结束时在最后设置的颜色。

编辑：再次阅读您的问题后，这是一个简短的解决方案：

var buttonState = document.getElementById("clickButton");
var colorIndex = 0;

var colorArray = ["red", "blue", "green", "black", "purple", "yellow", "pink", "orange"];

//on click alert user and change color

buttonState.onclick = function() {
    alert ("You clicked it.");
    if(colorIndex == colorArray.length) {
        colorIndex = 0;
    }

    buttonState.style.color = colorArray[colorIndex];
    colorIndex++;
}

在用户单击时，执行整个循环，然后执行colorArray的最后一个值。 相反，您应该在用户点击时增加颜色索引。

你可以这样做：

var buttonState = document.getElementById("clickButton");

var colorArray = ["red", "blue", "green", "black", "purple", "yellow", "pink", "orange"];

var color = 0;

//on click alert user and change color

buttonState.onclick = function() {
    alert ("You clicked it.");
    buttonState.style.color = colorArray[color];
    color++;
    if(color == colorArray.length - 1) color = 0;
}

您需要为当前位置保留一个计数器，然后在每次单击按钮时递增它：

buttonState.lastIndex = -1;
buttonState.onclick = function() {
    alert ("You clicked it.");

    // this line increments the counter by 1 and performs a modulo operation to keep the index in the bounds of the colorArray.
    buttonState.lastIndex = ++buttonState.lastIndex % colorArray.length;
    colorChange = colorArray[buttonState.lastIndex];
    buttonState.style.color = colorChange;
}

在旁注中，在onclick函数内部，您可以简单地引用this而不是buttonState 。