Wix does not render style.backgroundColor correctly


I’ve written a little piece of code which returns the style object of a button when clicked

$w("#fcat0,#fcat1,#fcat2,#fcat3,#fcat4,#fcat5,#fcat6,#fcat7").onClick( (event) => {

In the last couple of days, it seems that Wix is trying to make up its mind on what the value of style.backgroundColor should be. Yesterday, the UI component I designed in the Wix editor resulted in style.backgroundColor being set to “color_16” and the day before yesterday it was “rgba(…)”. I’m not doing anything here, it’s Wix that sets these values based on the design of my UI component. Why is it changing all the time? I want this to be static, so that I can work with this value in my code. Ideally a value different from “color_16” as this is not the way to represent colors in HTML.

Thanks for looking into this, because this is very annoying, especially because I cannot seem to set the value to an RGB value when it had “color_…” before. Or well, I can, but it isn’t adhered to. The following is seen in my console, but the UI component doesn’t reflect this.

Are you setting the rgba background color using code?

Yes. See below example.

$w("#box201").children[pos].style.backgroundColor = "rgb(0, 0, 0)";

@jonatandor35 this problem still isn’t solved. Would you mind looking into it for me?

See here:

@jonatandor35 writing the code isn’t the issue here… Like I said earlier: Wix should ensure they generate valid HTML instead of assigning style.backgroundColor like “color_16”…

Let me be more specific. Following code snippet loops over N number of buttons I’ve added in the UI. I merely added these buttons and positioned them, so I didn’t do anything in the designer - “regular”, “hover” and “disabled” state button designs were left untouched . My code sets these, dynamically. At least the “regular” part, as “hover” and “disabled” state button designs cannot be set this way, but that’s not the subject here.

var user_selection = JSON.parse('[]');

 var i,j=0;
 var nbChildren = $w("#box295").children.length;
         if(j < basic_colors.length) {
                    $w("#box295").children[i].text = basic_colors[j].name;
             } else if (!$w("#box295").children[i].id.includes("ocdel")) {
                    $w("#box295").children[i].style.backgroundColor = basic_colors[j].color;
            } else {
                    $w("#box295").children[i].text = "";
                } else if (!$w("#box295").children[i].id.includes("ocdel")) {

 var selcount = 0;

    $w("#oc0,#oc1,#oc2,#oc3,#oc4,#oc5,#oc6,#oc7,#oc8,#oc9,#oc10,#oc11,#oc12,#oc13,#oc14,#oc15,#oc16,#oc17,#oc18,#oc19,#oc20,#oc21,#oc22,#oc23,#oc24,#oc25,#oc26,#oc27,#oc28,#oc29,#oc30,#oc31,#oc32,#oc33,#oc34,#oc35").onClick( (event) => {
 var index = event.target.id.substring(2);
 var ocdel = "#ocdel" + index; //start from the second character
 var octext = "#octext" + index;
 if(!$w(ocdel).hidden){ //if icon is shown, do nothing
 } else { //show icon
            $w(ocdel).show() //todo: push
             var selection = JSON.parse('{ "color": "","name": ""}');
            selection.color = event.target.style.backgroundColor;
            selection.name = $w(octext).text;

Before my code runs, Wix generates style.backgroundColor for each of the buttons I have added on the page. Like I mentioned, I didn’t set anything, so it’s the default value - whatever that is. Sometimes this default value equals “color_16” and sometimes that default value equals “rgba(X, Y, Z, A)”. But it’s inconsistent. One day it’s “color_16”, the other day it’s “rgba(X, Y, Z, A)”.

When “color_16” is assigned, my code fails. I can override style.backgroundColor dynamically, but it doesn’t change anything in the UI. It works perfectly when Wix assigned “rgba(X, Y, Z, A)”. I don’t know why one day Wix generates “color_16” and the other day Wix generates “rgba(X, Y, Z, A)”, but “color_16” is not HTML valid. Hence my question is to investigate this at Wix’s side and have this fixed.

I hope this explained my issue.

@jonatandor35 @yisrael-wix could one of you shed some light on this issue? I believe this is something that goes wrong when Corvid code rendering is done. This entirely blocks me when trying to write dynamic code…

Both ways of working:

$w("#box295").children[i].style.backgroundColor = basic_colors[j].color;


var oc = "#" +$w("#box295").children[i].id;
$w(oc).style.backgroundColor = basic_colors[j].color;

generate the right outcomes in my console, but these outcomes are not reflected in the UI. Can you please take this up with your product development teams? Has nobody else reported these issues? It used to work fine up until like a month ago.

Please post the URL of the problematic site/page so we can evaluate.

@yisrael-wix https://www.thefashionsociety.eu/nocolor

@yisrael-wix did you already have the opportunity to look into this? Thanks!