Changing repeater container background

Ask the community
,
1

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; 
    }); 
});

});

2

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

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

920×450 41.3 KB

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

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;
});
});
});