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