Multi-element .hide/.show function

Ask the community
,
1

1415×493 37.7 KB

I have a product selection tool (see image) that allows the user to customize their product. A simple set of option dropdowns, color selection buttons, descriptive text, and final product image. Dropdowns are done. The second dropdown is supposed to activate 1 of 29 possible grouped color buttons. The group’s id is the value of the second dropdown plus/minus a few other characters. My code below is intended to iterate through those 29 groups and .hide the ones that don’t match the second dropdown value and .show the one that does. Currently, my code is showing all 29 groups no matter what I select:

function ColorSelection () {
    const boxChildren = $w("#toolbox").children;
    const colorGroups =  boxChildren.filter(results => results.type === "$w.Box");
    colorGroups.forEach(setGroup);

        function setGroup(item) {
            if (("#" + $w("#detailsdropdown").value.replace(/[^A-Za-z]/g, "") + "group").localeCompare (item.id)) {
                item.show()
            }
            else {
                item.hide();
            }
        }
}

What exactly am I missing?

2 
colorGroups.forEach(e => setGroup(e));
3

This wasn’t working for me originally but after digging around in the code, it turned out that the .localCompare function isn’t usable here while the === function wasn’t matching any item. I solved it by using .toLowercase function and now it’s working.

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();
        }
    });
}

Thanks J.D. for your guidance.

4

Yes I had a feeling this method was irrelevant to your purpose…