Change colour on every iteration of forEach loop in javascript?

I have a function that changes the colour of an element briefly, then changes it back to the original colour. Depending on the level you’re at (it’s a puzzle game), a forEach loop then runs this function for a a certain number of times (more at higher levels). Currently the colour the element changes to is whatever I’ve manually input into the code. I’m trying to find a way to changing that colour every time the forEach runs the function.

For example, say you are on the first round and the forEach runs three times, the element will flash red-white, red-white, red-white. What I need is for it to flash red-white, blue-white, pink-white. It also needs to loop back to the beginning of the array when it runs out of colours. For example at a higher level the forEach might run 6 times, so the iteration over the colours array will have to go back to the start once. Here’s the code:

function showCircle(item, j, x) {
  setTimeout(function () {
let x = 0;
let colors = ['blue','pink','green']
let color = colors[x];
    var num = initArray[j];
    var element = document.getElementById(num)
    element.classList.add(`cell-glow-${color}`)
    window.setTimeout(function () {
      element.classList.remove(`cell-glow-${color}`)
    }, 400);
    j++;
    x++
    console.log(color)
  }, speed() * j);
};

function showEachCircle(captureUserClicks) {
  initArray.forEach(showCircle);
  }

Clearly what’s happening above is that the showCircle function is zero-ing x each time, so it gets stuck on the first iteration. But I’m not sure where I should be putting those variables to make it iterate properly. Plus I haven’t even begun to get my head around forcing the array to go back to the beginning.

Any ideas? Thank you!

Answer

The problem is that you are overwriting x and you’re trying to modify a number, j, that’s being passed in.

First, the definition of forEach is helpful to read.

Specifically, in the function you’re passing in, showCircle, item is the current item of the array, j is the current index of the loop, and x is the original array, in this case it would be initArray. Then, you’re overwriting x with let x = 0, and you’re trying to increment j, which won’t do anything because it’s being incremented after it’s used.

I think you’re looking for something more like this:

// Declare these outside the loop
var x = 0;
var colors = ['blue','pink','green'];

function showCircle(num, j) {
  // Save the current value so it isn't overwritten by the loop/setTimeout combination
  let y = x;
  // Increment x
  x++;
  setTimeout(function () {
    // Get the color, using the modulus operator (%) to start at the beginning again
    var color = colors[y % colors.length];
    // Get the element. num is the current item in the loop from initArray
    var element = document.getElementById(num);
    // Make it glow!
    element.classList.add(`cell-glow-${color}`)
    setTimeout(function () {
      // Make it not glow...
      element.classList.remove(`cell-glow-${color}`)
    }, 400);
    console.log(color);
    // j is the index of num in initArray
  }, speed() * j);
};

function showEachCircle(captureUserClicks) {
  initArray.forEach(showCircle);
}

If you’re not familiar with the modulus (or remainder) operator %, it is very useful for looping when you have a limited set of things you want to loop over, in this case colors. In this example, with 3 colors:

0 % colors.length = 0
1 % colors.length = 1
2 % colors.length = 2
3 % colors.length = 0
4 % colors.length = 1
etc..