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

Question

This is the code i've been applying 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

Answer 1

We're missing a bit of the big picture in your question, but I'll try my hand at answering anyway.

In your onClick you are setting the background color to a literal string. That's not what you want. You probably want to do something more like this:

bigBox.style.backgroundColor = $w('#colorInput').value;
bigBox.style.borderColor = $w('#colorInput').value;

Of course, you are relying on people to input valid color names. You might want to consider using a dropdown or something similar instead of an open ended text input.