How do I take color Input from users and change color of WIX elements accordingly?

Ask the community
,
1

This is the code i’ve been applying on my website so far which is not working.

$w.onReady(function () {

const bigBox = $w('#box0'); 
const firstCircle = $w('#box1'); 
const secondCircle = $w('#box2'); 
const thirdCircle = $w('#box3'); 
const fourthCircle = $w('#box4'); 
const fifthCircle = $w('#box5');

const changeBoxBtn = $w(‘#changeBox’);
const colorInput = $w(‘#input2’) ;

changeBoxBtn.onClick(event => {

bigBox.style.backgroundColor = ‘colorInput’;
bigBox.style.borderColor = ‘colorInput’;
});
Refer to the image to see the wix editor view

2

Depends on how your color is setted up in your DATABASE (or in your case → in the INPUT).

$w.onReady(function () {
    const bigBox = $w('#box0');
    const firstCircle = $w('#box1');
    const secondCircle = $w('#box2');
    const thirdCircle = $w('#box3');
    const fourthCircle = $w('#box4');
    const fifthCircle = $w('#box5');
 
    const changeBoxBtn = $w('#changeBox');
    const colorInput = $w('#input2') ;

    changeBoxBtn.onClick(event => {
        bigBox.style.backgroundColor = colorInput;
        bigBox.style.borderColor = colorInput;
    });
});