multistate box not switching states

Ask the community
,
1

Hello. I have designed a relatively simple multistate box (showing price change of 15% discount on subscriptions) on a page and have used the following code. However, when I go to preview mode, the view only shows “state 4” and will not switch to “state 3” when click on the buttons. Thanks for any assistance!

$w.onReady( function () {
$w( “#button41” ).onClick(() => {
$w( ‘#statebox10’ ).changeState( “State4” );
});
$w( “#button47” ).onClick(() => {
$w( ‘#statebox10’ ).changeState( “State3” );
});
$w( “#button41” ).onClick(() => {
$w( ‘#statebox10’ ).changeState( “State4” );
});
$w( “#button47” ).onClick(() => {
$w( ‘#statebox10’ ).changeState( “State4” );
});
});

2

Why do you have two onClick functions for each button? I think if you delete the last two it should work for you.

3

Thanks, YIsrael. I did as you suggested and it did not fix the problem. I should have mentioned before that I duplicated my original “state 1 and state 2” boxes to make it simpler to change layout and content. When I did this, Wix automatically produced a new state 3 and state 4 with new buttons. So I just changed the code to reference the new states/buttons into my code that was working fine before. However, that is when I started to encounter problems. I erased the original state 1 and state 2 boxes before I realized there was an issue. I don’t know what these specific errors I’m receiving mean:

Wix code SDK error: The “stateInfo” parameter that is passed to the “changeState” method cannot be set to the value State3. It must be a state or a state ID from the “comp-kkgs4nwu” state box

Pricing & Plans
Line 6

The “stateInfo” parameter that is passed to the “changeState” method cannot be set to the value State3. It must be a state or a state ID from the “statebox10” state box

4

Please post the URL to your site and page.

5

The state that should display when accessing the page should feature the prices of $6, $12, $24; not $5.10, $10.20, $20.40 - that should be the second state. Thanks!

https://www.scancodeqr.com/pricing-plans

6

The states need to be lower case: state4, not State4.

7

Thanks so much, Yisrael, that simple change just about fixed it! My last question would be how do I make sure the first state displayed when clicking upon the page in live time is state 3? It currently displays first with state 4. I have switched the code to this, and it is still displaying state 4 first. Thanks!

$w.onReady( function () {
$w( “#button42” ).onClick(() => {
$w( ‘#statebox10’ ).changeState( “state3” );
});
$w( “#button41” ).onClick(() => {
$w( ‘#statebox10’ ).changeState( “state4” );
});
$w( “#button47” ).onClick(() => {
$w( ‘#statebox10’ ).changeState( “state3” );
});
$w( “#button41” ).onClick(() => {
$w( ‘#statebox10’ ).changeState( “state4” );
});
});

8

You just need to add the following line to the onReady() function:

$w('#statebox10').changeState("state3");
9

Yisreal, thank you so very much, it worked!! Your help, quick responses and easy explanations (for someone who has limited knowledge of coding) is so appreciated. You truly made my day!!

10

anyway to Drag and change the State? for example When Mousein Screen Drag From Right to Left Then Change the Statebox to Specified State

11

HI， I Need Help For Multi - State Box, for example When Mousein to Specified Area on screen can Used Drag up, down, left, and rightd then Showing Specified Area. Like slideshow ，But the sliding effect is like Pro gallery (Slider)