Multistate not working in "Live" version

Ask the community
,
1

Hi, I’m currently using multistate boxes on two pages.

  1. To show the price change on different payment arrangement (i.e., monthly/annually) on a pricing page. This is the following code used -

" $w . onReady ( function () {
$w ( “#group64” ). onClick (() => {
$w ( ‘#insightstatebox’ ). changeState ( “YearlyID” );
} );
$w ( “#group59” ). onClick (() => {
$w ( ‘#insightstatebox’ ). changeState ( “MonthlyID” );
} );
}); "

and

  1. For a drop-down interaction on a separate page, using the following code -
    " $w . onReady ( function () {
    $w ( “#demobutton0” ). onClick (() => {
    $w ( “#insightstatebox” ). changeState ( “3dmodel” );
    });
    $w ( “#demobutton1” ). onClick (() => {
    $w ( “#insightstatebox” ). changeState ( “Demographics” );
    });
    $w ( “#3dbutton0” ). onClick (() => {
    $w ( “#insightstatebox” ). changeState ( “3dmodel” );
    });
    $w ( “#3dbutton1” ). onClick (() => {
    $w ( “#insightstatebox” ). changeState ( “API” );
    });
    $w ( “#3dbutton2” ). onClick (() => {
    $w ( “#insightstatebox” ). changeState ( “3dmodel” );
    });
    $w ( “#3dbutton3” ). onClick (() => {
    $w ( “#insightstatebox” ). changeState ( “3dmodel” );
    });
    $w ( “#apibutton0” ). onClick (() => {
    $w ( “#insightstatebox” ). changeState ( “API” );
    });
    $w ( “#apibutton1” ). onClick (() => {
    $w ( “#insightstatebox” ). changeState ( “API” );
    });
    $w ( “#apibutton3” ). onClick (() => {
    $w ( “#insightstatebox” ). changeState ( “API” );
    });
    $w ( “#analyticsbutton0” ). onClick (() => {
    $w ( “#insightstatebox” ). changeState ( “Analytics” );
    });
    $w ( “#apibutton2” ). onClick (() => {
    $w ( “#insightstatebox” ). changeState ( “Analytics” );
    });
    $w ( “#analyticsbutton1” ). onClick (() => {
    $w ( “#insightstatebox” ). changeState ( “Analytics” );
    });
    $w ( “#analyticsbutton2” ). onClick (() => {
    $w ( “#insightstatebox” ). changeState ( “Analytics” );
    });
    $w ( “#analyticsbutton3” ). onClick (() => {
    $w ( “#insightstatebox” ). changeState ( “Demographics” );
    });
    })

Everything works as intended when viewed on preview mode, however, when viewing it via a live link, the interactions does not seem to work. Would really appreciate your help! Thanks in advance (:

2

Can you please post your live webpage URL?

3

Hi! Sure, this is the link https://wix.to/CEC4CDI You can see those two as mentioned under the following pages:

  1. Pricing
  2. Data Insights
4

@vernettaf It works for me…

5

@vernettaf I don’t see the issue either (there’re some errors in your console though, but it looks like the state changes)

6

Hi! Could i know which error are you referring to and what would the recommended solution be? :slight_smile:
So it seems that on certain browsers the state changes, while on others it doesnt’t. Any idea how I can prevent this from happening?

Thanks!!

7

^ @jonatandor35 @certified-code

8

@vernettaf Now I see different errors:

$w("#mobileVectorImage1").onClick(() => {
    $w("#insightstatebox").changeState("API");
})

There’s no such element.

Also:

Cannot read property 'getBoundingClientRect' of null