How to make a repeat pattern in for loop Javascript?

Question

I'd like to make a repeat pattern to color background. But after i is over colors.length it starts not to change background color because for example colors[3] does not exists. But I'd like to make colors[i] return back 0 again until first for loop completed.

const arr = document.getElementById('collection');
const colors = ['#FFC6C6', '#A4BDFF', '#F9F9F9'];

for (let i = 0; i < arr.children.length; i++) {
    arr.children[i].style.background = colors[i];
}

Pierre · Accepted Answer · 2022-08-17 21:50:37Z

5

Read about modulo

const arr = document.getElementById('collection');
const colors = ['#FFC6C6', '#A4BDFF', '#F9F9F9'];

for (let i = 0; i < arr.children.length; i++) {
    arr.children[i].style.background = colors[i % colors.length];
}

edited Aug 17, 2022 at 21:50

Pierre

355 bronze badges

answered Aug 17, 2022 at 21:46

Konrad

24.9k5 gold badges35 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to make a repeat pattern in for loop Javascript?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related