# Changing repeater container background

**URL:** <https://forum.wixstudio.com/t/changing-repeater-container-background/19004>\
**Category:** Ask the community\
**Tags:** code, question\
**Created:** [May 24, 2019, 9:31am UTC](https://forum.wixstudio.com/t/changing-repeater-container-background/19004 "2019-05-24T09:31:07Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![connordiskin](https://avatars.discourse-cdn.com/v4/letter/c/41988e/32.png) [@connordiskin](https://forum.wixstudio.com/u/connordiskin)\
**Post date:** [May 24, 2019, 9:31am UTC](https://forum.wixstudio.com/t/changing-repeater-container-background/19004/1 "2019-05-24T09:31:07Z")

</div>

Hi,

I’m trying to change each containers background colour within my repeater and cycle the background through three colours, but when i run the code below it comes with an error. How can i fix this?

$w.onReady( **function** () {

**let** no = 0;  
**let** color = “”;

```
$w("#dataset1").onReady(() => { 
     $w('#repeater1').forEachItem( ($w, itemData, index) => { 

```

**if** (no === 0){  
color = “#F2BF5E”;  
no = 1}

**if** (no === 1){  
color = “#FF6161”;  
no = 2}

**if** (no === 2){  
color = “#FF6161”;  
no = 0}

```
        $w("#container2").style.backgroundColor = color; 
    }); 
}); 

```

});

---

<div class="post-metadata">

**Author:** ![givemeawhisky](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/givemeawhisky/32/5383_2.png) [@givemeawhisky](https://forum.wixstudio.com/u/givemeawhisky)\
**Post date:** [May 24, 2019, 9:59am UTC](https://forum.wixstudio.com/t/changing-repeater-container-background/19004/2 "2019-05-24T09:59:01Z")

</div>

Yisrael (Wix Admin) has already done a simple thing with a random picture changing from his dataset with his images in.  
Code Used:

```javascript
// For full API documentation, including code examples, visit http://wix.to/94BuAAs
import wixWindow from 'wix-window';
import wixData from 'wix-data';

$w.onReady(async function () {

 // Check the render cycle so this is just done once.
 // Otherwise, server-side will render, and then the image
 // switches to the image that the client-side rendered.
 if (wixWindow.rendering.renderCycle === 1) {
 let res = await wixData.query("HomepageImages").find();
 let items = res.items;
 let count = items.length; // how many images do we have?
 let rnd = Math.floor(Math.random() * count);
        $w('#image1').src = items[rnd].image; // get a random image
        $w('#image1').show(); // image on page is hidden, we we now show it
    }
});

```

Another option is giving the user the option to change repeater backgrounds themselves from a dropdown option.

 ![](https://us1.discourse-cdn.com/wix/original/3X/e/e/ee7936d526a57a84eb18c38824d5d7cb1b3e509e.jpeg)

```javascript
THE ELEMENTS

The Page
Repeater: #repeater1​
Button: #button1
Box: #box1
​Dropdown: #dropdown1

The Database
Create a database Colors (#dataset1).
Recommended fields:
Color Name: name
Color Type: type
HEX Color Code: hex (e.g. #FFFFFF)
RGB Color Code: rgb (e.g. rgb(255,0,0))

```

```javascript
THE CODE

Page Code
$w.onReady(function () {
$w("#dataset1").onReady(() => {
$w("#repeater1").forEachItem( ($w, itemData, index) => {
let color = itemData.hex;
$w("#box1").style.backgroundColor = color;
});
});
});

```