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

1/4

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.

WEB DESIGN & DEVELOPMENT SOLUTIONS

GET PROFESSIONAL HELP