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。

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

5 个答案: