Problem with Toggle Switch Changing Section Background Color

Ask the community
, ,
1

Hello everyone,

I’m trying to use a toggle switch to change the background color of a specific section on my Wix page. However, I’m facing some challenges getting it to work.

Here’s the JS code I’ve implemented:

$w(“#switch1”).onChange((event) => {
if ($w(“#switch1”).checked) {
$w(“#section8”).style.backgroundColor = “#000000”;
} else {
$w(“#section8”).style.backgroundColor = “#FFFFFF”;
}
});

With this code, I expect the background color of the section with ID #section8 to change based on the status of the toggle switch with ID #switch1. However, the section’s background color doesn’t change when I toggle the switch.

Has anyone encountered a similar issue or have any suggestions on how I might resolve this? Your guidance would be much appreciated!

Thank you,

Calvin

2

have you tried using rgba colour instead

$w(“#myElement”).style.backgroundColor = “rgba(255,0,0,0.5)”;

also use ’ instead of " with your element eg (‘#switch1’)

also have a look here. it may help

1 Like
4

Hi dansuhr!

Thanks a lot!! It didnt work with the colorchange of section, so i changed to change the box color and that worked!

I mean the original code is not solved but the problem is!

working code:

$w.onReady(function () {

$w('#switch1').onChange(() => {

    if ($w('#switch1').checked) { 
        $w('#box28').style.backgroundColor = 'rgba(0,0,0,1)';
    } else {
        $w('#box28').style.backgroundColor = 'rgba(255,255,255,1)';
    }
    
});

});

Kind regards,

Calvin

1 Like
5

great.
I found the same issue with sections. I says the .style does not exist on HiddenCollaspedElement. Even though it is not hidden or collapsed.
A container stretched will do the same function.

1 Like