Well first of all, my eyes do crying when i see all the hard-coded stuff, what do i mean ? ? ?
You are coding every single step of your code in hard-coded code-lines.
Why not coding much more → DYNAMICALLY <— ???
Your code…
$w('#horizontalMenu2').onItemClick((event)=> {console.log('Clicked-ID: ', event.target.id);
let label = event.item.label; console.log('Label: ', label);
if(label === 'Organization Committee') {console.log('You clicked Organization Committee');
let tabValue = "Organization";
local.setItem("tab", tabValue);
wixLocationFrontend.to("/main-street-approach#section22");
}
else if(label === 'Design Committee') {console.log('You clicked Design Committee');
let tabValue = "Design";
local.setItem("tab", tabValue);
wixLocationFrontend.to("/main-street-approach#section22");
}
else if(label === 'Promotions Committee') {console.log('You clicked Promotions Committee');
let tabValue = "Promotions";
local.setItem("tab", tabValue);
wixLocationFrontend.to("/main-street-approach#section22");
}
else if(label === 'Economic Vitality Committee') {console.log('You clicked Economic Vitality Committee');
let tabValue = "Economic Vitality";
local.setItem("tab", tabValue);
wixLocationFrontend.to("/main-street-approach#section22");
}
});
My approach…
const tabMapping = {
'Organization Committee': 'Organization',
'Design Committee': 'Design',
'Promotions Committee': 'Promotions',
'Economic Vitality Committee': 'Economic Vitality'
};
$w('#horizontalMenu2').onItemClick((event) => {
const label = event.item.label;
const tabValue = tabMapping[label];
if (tabValue) {
console.log(`You clicked ${label}`);
local.setItem("tab", tabValue);
wixLocationFrontend.to("/main-street-approach#section22");
} else {
console.log('Unknown label: ', label);
}
});
Upgraded approach…
const menuItems = $w('#horizontalMenu2').items;
const getTabValueFromLabel = (label) => {
const words = label.split(' ');
const committeeIndex = words.indexOf('Committee');
if (committeeIndex > 0) {
return words.slice(0, committeeIndex).join(' ');
} return null;
};
$w('#horizontalMenu2').onItemClick((event) => {
const label = event.item.label;
const tabValue = getTabValueFromLabel(label);
if (tabValue) {console.log(`You clicked ${label}`);
local.setItem("tab", tabValue);
wixLocationFrontend.to("/main-street-approach#section22");
} else { console.log('Unknown label or no special action required: ', label);}
});
About your issue…since your setup is very similar to this topic/post…
…maybe you should take a look onto it…