backgroundColor does not set

Ask the community
,
1

The background color does not change.

I am looking for a way to add some animation using the “wix js”. But I did not find a way to add a class nor an ID. So I try to simply change the background which does not work…

2126×1296 257 KB

2880×1182 295 KB

2

Did you run onViewportLeave for #anchor4?

3

A connection to the PROPERTY-PANEL in this case is → NOT ← needed!

Since the event gets fired from onReady-Code-Part!

  1. Check if you really leave the viewPort!
  2. Check if you setted-up your button to 100% opacity in the property-panel (this is neccessary, if you want to work with style-colors.

Test your code and its function generating another example first!

  1. Create a button on your page!
  2. Paste this code onto your page (make sure you do not have multiple onReady-code-parts in your code!
  3. Press the button! (You did not forget to set the opacity to 100% first, in the property panel ?)

Setting the opacity back to transparent!

$w('#button1').style.backgroundColor = "rgba(255,255,255, 0)";

$w.onReady(()=>{
    $w('#button1').style.backgroundColor = "rgba(255,255,255, 0)";
    $w('#button1').onClick(()=>{console.log("button clicked!")
        $w('#button1').style.backgroundColor = "blue";
    });
});

Another version: RGB

$w.onReady(()=>{
    $w('#button1').onClick(()=>{console.log("button clicked!")
	$w('#button1').style.backgroundColor = "rgb(155,245,155)";
    });
});

Another version: RGBA

$w.onReady(()=>{
    $w('#button1').onClick(()=>{console.log("button clicked!")
	$w('#button1').style.backgroundColor = "rgba(155,245,155, 0.5)";
    });
});