Change colour on every iteration of forEach loop in javascript?

Question

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!

By "red-white, blue-white, pink-white" do you mean "blue-white, pink-white, green-white"? Because does are the colors in your code. — Aplet123
– Aplet123, Commented Dec 17, 2020 at 17:18
Ah so the colours I wrote are completely arbitrary. Apologies for the confusion - I was just demonstrating the functionality, but the actual values (colours) could be anything. — Maccles
– Maccles, Commented Dec 17, 2020 at 17:21
InitArray is defined outside the function and is an initial array that the function runs through to specify which DOM elements should be changed. — Maccles
– Maccles, Commented Dec 17, 2020 at 17:22

tghw · Accepted Answer · 2020-12-17 18:20:42Z

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..

thank you so much! I'm going to look at both these answers in depth before I accept - they both seem to have a lot of really helpful information but I'm a noob so it'll take me some concentration before I figure out which one to use!

clod9353 · Accepted Answer · 2020-12-17 18:21:27Z

1

This is how I would do it:

To avoid x=0 being executed every time you call the function, we're going to put it outside of it.
To iterate over the array of colors we will take advantage of the modulo operator:
```
 `x = (x+1)%3`
```
This, instead of x++ will get the values 0, 1, 2 over and over again.
array.forEach() would call the function multiple times without waiting for a complete flash (from white to red and back to white) to finish. We will use recursion instead. Once a complete flash is done, we'll call the function again if needed.

You can see a working example in the snippet:

const initArray = [1,1,1,1,1,1];
const colors = ['red', 'green', 'blue'];
let x = 0;
let numberOfFlashes = 0;
function showCircle() {
  setTimeout(()=> {
    color = colors[x];
    console.log(color);
    setTimeout(()=> {
      console.log('white');
      numberOfFlashes++;
      if(numberOfFlashes<initArray.length){
        showCircle();
      }
    }, 400);

    x = (x+1)%3;
  }, 400);
}

showCircle();

Now you can just put your code instead of my console logs and you should get it to work

answered Dec 17, 2020 at 18:21

clod9353

2,0222 gold badges9 silver badges21 bronze badges

1 Comment

Maccles Over a year ago

thank you so much! I'm going to look at both these answers in depth before I accept - they both seem to have a lot of really helpful information but I'm a noob so it'll take me some concentration before I figure out which one to use!

Collectives™ on Stack Overflow

Change colour on every iteration of forEach loop in javascript?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related