@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;
for(i=0;i<nbChildren;i++){
if($w("#box295").children[i].id.includes("oc")){
if(j < basic_colors.length) {
if($w("#box295").children[i].id.includes("octext")){
$w("#box295").children[i].text = basic_colors[j].name;
j++;
} else if (!$w("#box295").children[i].id.includes("ocdel")) {
console.log($w("#box295").children[i].style.backgroundColor);
$w("#box295").children[i].style.backgroundColor = basic_colors[j].color;
console.log($w("#box295").children[i].style.backgroundColor);
}
} else {
if($w("#box295").children[i].id.includes("octext")){
$w("#box295").children[i].text = "";
} else if (!$w("#box295").children[i].id.includes("ocdel")) {
$w("#box295").children[i].hide();
}
}
}
}
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;
user_selection.push(selection);
console.log(user_selection);
}
})
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.
