How do I make the background black when a switch is flipped?

Ask the community
,
1

Hello.

I’m trying to make a social website using WiX and I got a switch from the add menu. I want it to change the page background to black when flipped. However, I don’t have much experience with JavaScript. Can I get some help?

2 
$w.onReady(function () {   });

export function switch1_change(event) {
 if($w('#switch1').checked===true) {
        $w('#box1').style.backgroundColor = "rgb(255,255,255)";
    }
 else {
        $w('#box1').style.backgroundColor = "rgb(0,0,0)";
    }
}

Here an example…
https://www.media-junkie.com/color-switch

Yes it is just a box and not the whole backgroundcolor of the website.
Could not find the right command for the whole site.

EDIT: Here a better solution…

$w.onReady(function () {   
    $w('#switch1').onChange(()=>{
 if($w('#switch1').checked===true) {$w('#box1').style.backgroundColor = "rgb(255,255,255)";}
 else {$w('#box1').style.backgroundColor = "rgb(0,0,0)";}
    });
});
3

Hi @russian-dima @alphaandtem

You can change the colour of the whole page itself by → 

$w('Document').background.src = "wix:image://v1/68d3a9_1de7529c444b4c9eb38401f8efe0cad2.jpg/flowers.jpg#originWidth=1970&originHeight=1120"

(Tip - You don’t have to include # inside the $w(‘Document’) )

You can change the background of a strip by → 

$w('#strip1').background.src = "wix:image://v1/68d3a9_1de7529c444b4c9eb38401f8efe0cad2.jpg/flowers.jpg#originWidth=1970&originHeight=1120";
4

Yes that’s right. It is a little bit tricky, but not exactly a command for changing the backgroundcolor. You change the “background-image”, but it works if you use black background-image, that’s right!

I saw it, too but in my eyes it was not the solution. My question would be, why there is still no command for a simply background-color-changing?

You have it for BOXES and BUTTONS, but it should be given for every element on my site and of course the site itself.

But well, someone would tell me right now, put it onto the WISHLIST, i know :rofl:

5

@russian-dima But, I will not say you to put it onto the WISHLIST,
Instead, I say → Put it here :rofl:

6

BTW, I think you can also do it via a custom element (then you don’t need to use a background image. You can set the color directly. This is especially relevant when you need to use more complicated background colors like specific color-gradients etc. but of course it takes more time to implement and it might break if Wix changes the page html structure).

7

@jonatandor35
Would be cool to see an example. Never worked with custom-elements before.

8

But you can see how fragile it is. If Wix decides one day to remove or change the html element with id = “SITE_BACKGROUND”, it’ll throw an error.
So it’s risky, and you’re better avoid that if you have any other choice.

P.S. I put it here as you asked for an example, but I’m going to delete it, as it’s prone to errors, and it’ll be better if users avoid it completely.

9

@jonatandor35
I have copied it, you can delete. THANKS. Will take a look at this tomorrow.