Vorbly <Code>
CODING MADE EASY WITH VORBLY
WIX CODE CHANGE REPEATER ITEM COLOR
Need dynamically change the color of a repeater item? This tutorial will show you how to use Wix Code to change repeater item with color code from your database. We will provide you with the webpage elements and sample codes required to implement this feature.
THE DEMO
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;
});
});
});
COMMENTS
I'm a paragraph. Click here to add your own text and edit me. It's easy.