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

Question

Trying to make a simple JS so that when the button is pushed it alerts that "You clicked it" and it changes the color of the text in the button. It is immediately going to the last color in the array. I want it to increase incrementally so that each time I click it, it advances through the different colors.

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

The entire for loop is running on each click.

Therefore, the button is set to the color at the end of the loop.

What you might do instead is store the current color index in a variable, and when the button is pushed, fetch the next color, like this:

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

You are looping through all the colors very quickly always ending on the last one. Here's one solution to make sure that colors rotate from first to last infinitely.

Fiddle: 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

I think it's iterating properly over all elements, but it is executing so fast that you are not seeing all the colors. Instead, you only see the color that was set in the end when the loop finishes.

Edit: After reading your question again, here is a short solution:

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

On user click your entire loop is executed, then the last value of colorArray is took. Instead, you should increment color index on user click.

You can do it like this:

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

You need to keep a counter for the current position and then increment it everytime the button was clicked:

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

On a sidenote, inside the onclick function, you can simply refer to this instead of buttonState .