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?
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.
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.
This code returns an Object. console.log($w("#" + colorGroup))
Try: console.log($w("#" + colorGroup).value)
Check the dropdown values pair (label and value)
Are you using it inside a dropdown.onChange() event handler ?
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);