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

Question

尝试制作一个简单的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;
    }
}

Answer 1

每次点击都会运行整个for循环。

因此，按钮设置为循环结束时的颜色。

你可能会做的是将当前颜色索引存储在一个变量中，当按下该按钮时，获取下一个颜色，如下所示：

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

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

var currentColorIndex = 0;

//on click alert user and change color

buttonState.onclick = function() {
    alert ("You clicked it.");
    currentColorIndex += 1;
    // reset to 0 if at the end of array to loop around
    if (currentColorIndex === colorArray.length) currentColorIndex=0;
    var colorChange = colorArray[currentColorIndex];
    buttonState.style.color = colorChange;
}

Answer 2

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

小提琴： http ： //jsfiddle.net/c4zw2doe/ 。

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++];
}

Answer 3

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

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

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++;
}

Answer 4

在用户单击时，执行整个循环，然后执行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;
}

Answer 5

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

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 。