The value passed to the element selector function (usually $w), must be of type string

Ask the community
,
1

Hey I’m having a little problem with my code it keeps putting up “The value passed to the element selector function (usually $w), must be of type string” whenever I click my Home and About button

1909×404 18.7 KB

I’m trying to build a mega menu

1626×838 29.9 KB

Here’s the second half

1610×809 34.7 KB

2

In your code you’re treating the menuItems as if it was an array, but it’s actually just an object.
So either change it to be an array or change your script to handle an object.

3

How would I go about doing that I’m new to coding
const menuItems = {
Home : {

  button :  '#Home' , 

  underline :  '#HomeLine' , 

  //contentBox: '#HomeBox'

},

Shop : {

  button :  '#Shop' , 

  underline :  '#ShopLine' , 

  contentBox :  '#ShopBox'

},

FAQ : {

  button :  '#FAQ' , 

  underline :  '#FAQLine' , 

  //contentBox: '#kidsBox'

},

About : {

  button :  '#About' , 

  underline :  '#AboutLine' , 

  //contentBox: '#kidsBox' 

  },

$w.onReady( function () {
initMegaMenu()
});
​
function initMegaMenu () {
for (let i in menuItems) {
$w(menuItems[i].button).onMouseIn(() => {
openRelevantPanel(menuItems[i]);
});
​
$w(menuItems[i].contentBox).onMouseOut(() => {
openRelevantPanel();
});
}
}
​
async function openRelevantPanel ( hoverItem ) {
for ( let i in menuItems) {
if (menuItems[i] === hoverItem) {
$w(menuItems[i].underline).show();
await $w(menuItems[i].contentBox).expand();
} else {
$w(menuItems[i].underline).hide();
$w(menuItems[i].contentBox).collapse();
}
}
}

4

Do something like:

const menuItems = ['Home', 'About', 'Shop',/*etc..*/];
$w.onReady(() => {
menuItems.forEach(e => {
$w('#' +e).onMouseIn(event => {
	$w(`#${e}Line`).show();
	$w(`#${e}Box`).expand();
})
$w('#' +e).onMouseOut(event => {
	$w(`#${e}Line`).hide();
	$w(`#${e}Box`).collapse();
})
})
})
5

Ok thanks that part works. But now I’m trying to get it to open a #ShopBox with the shop button and #AboutBox with the about button.

1905×970 399 KB

And it keeps putting up flags.

1917×975 126 KB

Sorry I’m really bad with this stuff

6

Check the property ID of the boxes. It should be case-sensitive. Make sure it’s spelled correctly.

7

ok thanks

8

ok so now how do I keep the box open when I hover over it and then close it when the mouse is off the box

9

And the box only shows up on the test page. I want it to show up on every page

10

I have the code set to the mastePage.js