Trying to understand JS loops

Question

I'm struggling with understanding JS loops. I found an online tutorial for a button changing random colors for a div id="container". However, it turns out that the random colors are frequently repeated after a click. I want to change the code and loop through the array colors one by one and change the color of the div#container after each click. This is my code:

let colors = ["blue", "yellow", "green", "brown", "orange"];
let btn = document.getElementById("btn");

btn.addEventListener("click", function () {
  let container = document.getElementById("container");
  for (i = 0; i < colors.length; i++) {
    let selectColor = colors[i];
  }

  container.style.backgroundColor = selectColor;
});

I get the error: assignment to undeclared variable i. Can someone help me out?

Answer 1

You're looping through all the colors in the array at once, and then only use the last one to set the backgroundcolor.

You should only increment by one and then set the color

let colors = ["blue", "yellow", "green", "brown", "orange"];
let btn = document.getElementById("btn");
let i = 0;
let container = document.getElementById("container");

btn.addEventListener("click", function () {
  i++;
  if(i >= colors.length) i = 0;
  container.style.backgroundColor = colors[i];
});

Answer 2

You need to declare the variable i on line 6, so instead of

  for (i = 0; i < colors.length; i++) {
    let selectColor = colors[i];
  }

you would have

  for (let i = 0; i < colors.length; i++) {
    let selectColor = colors[i];
  }

Answer 3

you missed declaring "i" in the for loop.

for(let i = 0; i < colors.length; i++) {
    let selectColor = colors[i];
}

Answer 4

Just to add to Kokodoko's answer: you don't need a loop because all you need to do is cycle through the array indexes one-by-one when the button is clicked, not all the colours at once.

Here's a slightly different approach which doesn't rely on the array index being a global variable. Instead it returns a function (closure) to the listener that, when called, changes from one colour to another.

const colors = ['blue', 'yellow', 'green', 'brown', 'orange'];

const container = document.getElementById('container');
const btn = document.getElementById('btn');

// We call the function which returns a new function
// which is what the button calls
btn.addEventListener('click', handleClick(), false);

// Initially set `index` to 0
function handleClick(index = 0) {

  // This is the function the listener will call
  return function() {

    // Set the BG colour to the new index
    // if the index hasn't reached the end of the array
    // otherwise set it to zero, and start again.
    if (index < colors.length - 1) {
      container.style.backgroundColor = colors[index++];
    } else {
      index = 0;
    }
  }

}

#container {
  width: 100px, height: 100px;
}

<button id="btn">Click</button>
<div id="container">Container</div>