Changing the color of a switch

Ask the community
,
1

Hi,

I wanted to change the color of a switch button if the boolean is true. I gathered some code from wherever I could, but at the end it says “style does not exist on meeting”. How do I have to define that?

My code:

wixData.query("dynamicDataset")
  .eq("meeting", "conference", "office")
  .find()
   .then( (results) => {
 let boolean = results.items[0].approved;
 if(boolean === "true"){
     $w("#meeting").style.backgroundColor = "green"); 
     } 
 else{ 
     $w("#meeting").style.backgroundColor = "grey"; 
     }
  } )

Thanks for the help.

2

It supposed to according to the following:
https://www.wix.com/corvid/reference/$w.Button.html#style

And you can verify it by typing the code “$w(“#meeting”.sty…” in code panel, tooltip will show the property as you are typing.

889×372 53.5 KB

3

Check the actual button type that is being used.
https://www.wix.com/corvid/reference/$w.Button.html#style
https://www.wix.com/corvid/reference/$w.Switch.html

A normal button will easily do this for you, however a switch button as you have stated may not be usable with style and therefore not work.

Note
Not all styles can be used on all button designs. To determine which styles work with a specific button design, go to the Button Design panel in the Editor, choose a design, and click Customize Design . The design options that you see in the Button Design panel for your particular button are the styles you can use in your code.

4

Switch does not work with style.

5

You can set the switch button colour in its own settings within the editor, then you can always have it do something when it is clicked, like another box turns green etc.
https://www.wix.com/corvid/reference/$w.Switch.html#checked

Something like this…

export function switch1_click(event) {
if ($w('#switch1').checked) {
$w("#colourBox").style.backgroundColor = "green";
} else {
$w("#colourBox").style.backgroundColor = "grey"; 
}
}
6

Thanks a lot for the help. I found out that in the settings of the switch I can change the colors if it’s disabled (read mode only). This way I was able to edit the colors. There a bit lesser options than in regular, but it worked.