CODEWITHSUNDEEP
javascriptarraysfor-loop
user5096599
user5096599

Reputation:

Why is the value of [i] jumping to the end of the array immediately using for-loop?

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

Upvotes: 1

Views: 98

Answers (5)

SaSchu
SaSchu

Reputation: 513

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

Upvotes: 0

sylvain1264
sylvain1264

Reputation: 855

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

Upvotes: 0

Sebastian Nette
Sebastian Nette

Reputation: 7832

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.

Upvotes: 0

Paul
Paul

Reputation: 27463

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

Upvotes: 2

DRD
DRD

Reputation: 5813

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

Upvotes: 1

Related Questions