Selector string from user input variable

Ask the community
,
1

I need to use a dropdown selection as an element selector:

const colorGroup = ($w("#detailsdropdown").value.replace(/[^A-Za-z]/g, "") + "group").toLowerCase();
const colorSelection = $w("#" + colorGroup);

this code returns colorSelection as undefined. Is there a correct/possible way to accomplish this?

2

use console-log! to find your error.

const colorGroup = ($w("#detailsdropdown").value.replace(/[^A-Za-z]/g, "") + "group").toLowerCase();
console.log($w("#" + colorGroup))
const colorSelection = $w("#" + colorGroup);
3

Are you using it inside a dropdown.onChange() event handler ?

4

I’ve tried:
As a function called inside a dropdown.onChange() event handler and also inside an .onReady but no go on either.
Does that affect the outcome?

5


???

6

@eimimitu Post your entire code

7

This code returns an Object.
console . log ( $w( “#” + colorGroup ))
Try:
console . log ( $w( “#” + colorGroup ).value)
Check the dropdown values pair (label and value)

8

@jonatandor35 still work in progress but…

export function detailsdropdown_change(event) {
    CampaignSelection();
    ColorOptions();
    DetailsDescription();
    $w("#campaigndropdown").enable();
    $w("#fittext").show();
    $w("#materialtext").show();
    $w("#colortext").show();
}

function ColorOptions() {    
 const boxChildren = $w("#toolbox").children;
 const colorGroups =  boxChildren.filter(results => results.type === "$w.Box");
 const colorGroup = ($w("#detailsdropdown").value.replace(/[^A-Za-z]/g, "") + "group").toLowerCase();
    colorGroups.forEach(group => {
 if(colorGroup === (group.id)) {
            group.show();
        }
 else {
            group.hide();
        }
    });
}

$w.onReady(function() {
 const colorGroup = $w("#" + ($w("#detailsdropdown").value.replace(/[^A-Za-z]/g, "") + "group").toLowerCase());
 const colorSelection = $w("#" + colorGroup).children;
    $w(colorSelection).onClick((event) => { //..........

The visible group contains color buttons that correspond to color selection.
Ultimately this last .onReady is an attempt to capture an .onClick event of those visible buttons rather than having an event handler for each button (there are 29 groups and a total of 295 color buttons divided into these groups)

9

returns “undefined”

10

You can to use many selectors on one event or Element Class:
$w(‘#button1, #button2, #button3’).onClick()
or
$w(‘Button’).onClick
All elements Button on page will fire that event.
Maybe this helps.

11

I did come across this functionality, however, each button has the specific function of calling an image of a color that matches the button. As per my code, I’ve been able to activate the right group by matching the id with the value of the dropdown. Now all that’s left is calling that group’s .children (the buttons) and calling an .onClick on them. Finally, I have to figure out which of those several buttons was clicked and use its .id to call the corresponding image.

I was originally trying to use a less efficient method and having issues as well as described in this post:
https://www.wix.com/corvid/forum/community-discussion/milti-level-children-filter

12

The following is working:

function ColorSelection() {
 const colorGroup = (($w("#detailsdropdown").value.replace(/[^A-Za-z]/g, "") + "group").toLowerCase());
 const colorButtons = $w("#" + colorGroup).children;
    colorButtons.onClick((event) => {
 const colorButton = event.target.id;
 const selectedColor = colorButton.replace(/[^A-Za-z]/g, "");
        wixData.query("options")
        .contains("details", $w("#detailsdropdown").value)
        .limit(1000)
        .find()
        .then(results => {
 const uniqueTitles = getUniqueTitles(results.items);
            uniqueTitles.forEach(color => {
 if(color.replace(/[^A-Za-z]/g, "").toLowerCase() === selectedColor) {
                    $w("#colortext").text = color;
                }
            });

 function getUniqueTitles(items) {
 const titlesOnly = items.map(item => item.colors);
 return [...new Set(titlesOnly)];
            }
        });
    });
}

Thank you everyone.