Code isn't working

Ask the community
,
1

I’ve used this code on other projects so I’m not sure why it isn’t working.

I’m coding in a 7 step clickthrough carousel using Velo and multi-state boxes but when I run/ publish the code the buttons do not work

I have no errors in my console. I have triple checked and all of my state ID’s are correct.

Here is the code:

$w . onReady ( function () {

$w ( '#s1b1' ). onClick (() => {  
    $w ( '#statebox1' ). changeState ( "b1" ); 
}); 

$w ( '#s1b2' ). onClick (() => {  
    $w ( '#statebox1' ). changeState ( "b2" ); 
}); 

$w ( '#s1b3' ). onClick (() => { 
    $w ( '#statebox1' ). changeState ( "b3" ); 
}); 

$w ( '#s1b4' ). onClick (() => { 
    $w ( '#statebox1' ). changeState ( "b4" ); 
}); 

$w ( '#s1b5' ). onClick (() => {  
    $w ( '#statebox1' ). changeState ( "b5" ); 
}); 

$w ( '#s1b6' ). onClick (() => { 
    $w ( '#statebox1' ). changeState ( "b6" ); 
}); 

$w ( '#s1b7' ). onClick (() => { 
    $w ( '#statebox1' ). changeState ( "b7" ); 
}); 

$w ( '#s2b1' ). onClick (() => {  
    $w ( '#statebox1' ). changeState ( "b1" ); 
}); 

$w ( '#s2b2' ). onClick (() => { 
    $w ( '#statebox1' ). changeState ( "b2" ); 
}); 

$w ( '#s2b3' ). onClick (() => { 
    $w ( '#statebox1' ). changeState ( "b3" ); 
}); 

$w ( '#s2b4' ). onClick (() => { 
    $w ( '#statebox1' ). changeState ( "b4" ); 
}); 

$w ( '#s2b5' ). onClick (() => {  
    $w ( '#statebox1' ). changeState ( "b5" ); 
}); 

$w ( '#s2b6' ). onClick (() => { 
    $w ( '#statebox1' ). changeState ( "b6" ); 
}); 

$w ( '#s2b7' ). onClick (() => { 
    $w ( '#statebox1' ). changeState ( "b7" ); 
    }); 

$w ( '#s3b1' ). onClick (() => {  
    $w ( '#statebox1' ). changeState ( "b1" ); 
}); 

$w ( '#s3b2' ). onClick (() => { 
    $w ( '#statebox1' ). changeState ( "b2" ); 
}); 

$w ( '#s3b3' ). onClick (() => { 
    $w ( '#statebox1' ). changeState ( "b3" ); 
}); 

$w ( '#s3b4' ). onClick (() => { 
    $w ( '#statebox1' ). changeState ( "b4" ); 
}); 

$w ( '#s3b5' ). onClick (() => {  
    $w ( '#statebox1' ). changeState ( "b5" ); 
}); 

$w ( '#s3b6' ). onClick (() => { 
    $w ( '#statebox1' ). changeState ( "b6" ); 
}); 

$w ( '#s3b7' ). onClick (() => { 
    $w ( '#statebox1' ). changeState ( "b7" ); 
}); 

$w ( '#s4b1' ). onClick (() => {  
    $w ( '#statebox1' ). changeState ( "b1" ); 
}); 

$w ( '#s4b2' ). onClick (() => { 
    $w ( '#statebox1' ). changeState ( "b2" ); 
}); 

$w ( '#s4b3' ). onClick (() => { 
    $w ( '#statebox1' ). changeState ( "b3" ); 
}); 

$w ( '#s4b4' ). onClick (() => { 
    $w ( '#statebox1' ). changeState ( "b4" ); 
}); 

$w ( '#s4b5' ). onClick (() => {  
    $w ( '#statebox1' ). changeState ( "b5" ); 
}); 

$w ( '#s4b6' ). onClick (() => { 
    $w ( '#statebox1' ). changeState ( "b6" ); 
}); 

$w ( '#s4b7' ). onClick (() => { 
    $w ( '#statebox1' ). changeState ( "b7" ); 

$w ( '#s5b1' ). onClick (() => {  
    $w ( '#statebox1' ). changeState ( "b1" ); 
}); 

$w ( '#s5b2' ). onClick (() => { 
    $w ( '#statebox1' ). changeState ( "b2" ); 
}); 

$w ( '#s5b3' ). onClick (() => { 
    $w ( '#statebox1' ). changeState ( "b3" ); 
}); 

$w ( '#s5b4' ). onClick (() => { 
    $w ( '#statebox1' ). changeState ( "b4" ); 
}); 

$w ( '#s5b5' ). onClick (() => {  
    $w ( '#statebox1' ). changeState ( "b5" ); 
}); 

$w ( '#s5b6' ). onClick (() => { 
    $w ( '#statebox1' ). changeState ( "b6" ); 
}); 

$w ( '#s5b7' ). onClick (() => { 
    $w ( '#statebox1' ). changeState ( "b7" ); 

$w ( '#s6b1' ). onClick (() => {  
    $w ( '#statebox1' ). changeState ( "b1" ); 
}); 

$w ( '#s6b2' ). onClick (() => { 
    $w ( '#statebox1' ). changeState ( "b2" ); 
}); 

$w ( '#s6b3' ). onClick (() => { 
    $w ( '#statebox1' ). changeState ( "b3" ); 
}); 

$w ( '#s6b4' ). onClick (() => { 
    $w ( '#statebox1' ). changeState ( "b4" ); 
}); 

$w ( '#s6b5' ). onClick (() => {  
    $w ( '#statebox1' ). changeState ( "b5" ); 
}); 

$w ( '#s6b6' ). onClick (() => { 
    $w ( '#statebox1' ). changeState ( "b6" ); 
}); 

$w ( '#s6b7' ). onClick (() => { 
    $w ( '#statebox1' ). changeState ( "b7" ); 

$w ( '#s7b1' ). onClick (() => {  
    $w ( '#statebox1' ). changeState ( "b1" ); 
}); 

$w ( '#s7b2' ). onClick (() => { 
    $w ( '#statebox1' ). changeState ( "b2" ); 
}); 

$w ( '#s7b3' ). onClick (() => { 
    $w ( '#statebox1' ). changeState ( "b3" ); 
}); 

$w ( '#s7b4' ). onClick (() => { 
    $w ( '#statebox1' ). changeState ( "b4" ); 
}); 

$w ( '#s7b5' ). onClick (() => {  
    $w ( '#statebox1' ). changeState ( "b5" ); 
}); 

$w ( '#s7b6' ). onClick (() => { 
    $w ( '#statebox1' ). changeState ( "b6" ); 
}); 

$w ( '#s7b7' ). onClick (() => { 
    $w ( '#statebox1' ). changeState ( "b7" ); 
 });

});

2

Post the page with the above code, please?

Can’t guess the issue by just looking into the code…

3

2432×1182 120 KB

4

You have a SYNTAX-ERROR inside your code!
This is why your code is not working!

This little code-part of your project works on your site, if you replace my example-code-part and your full-code?

$w.onReady(function() {
    $w('#s1b1').onClick(() => {$w('#statebox1').changeState("b1");});
    $w('#s1b2').onClick(() => {$w('#statebox1').changeState("b2");});
    $w('#s1b3').onClick(() => {$w('#statebox1').changeState("b3");});
    $w('#s1b4').onClick(() => {$w('#statebox1').changeState("b4");});
    $w('#s1b5').onClick(() => {$w('#statebox1').changeState("b5");});
    
   //....complete your code.....
});