Button clicked on load

Ask the community
,
1

I have three buttons that each links to a slide in a slideshow (Button1, Button2 and Button3). I would like the first button (Button1) to be “clicked” on load so that the viewer understands that the slide corresponds to that specific button.

I attach code below. Many thanks for any feedback.

function setButtonColor2(button, opacity){
button.style.backgroundColor = rgba( 199 , 199 , 199 ,${opacity});
button.style.borderColor = rgba( 199 , 199 , 199 ,${(opacity + 1 ) % 2 });
opacity === 0 ? button.style.color = “#C7C7C7” : button.style.color = “#000000” ;}

$w.onReady( function () {
let buttonsToChange = [$w( “#Button1” ), $w( “#Button2” ), $w( “#Button3” )]; //put the relevant buttons here
buttonsToChange.forEach(button => {
setButtonColor2(button, 1 );
button.onClick((event) => {
buttonsToChange.forEach(b => {
setButtonColor2(b, 1 );
});
setButtonColor2(button, 0 );
})
})
})

$w.onReady( function () {
$w( “#Button1” ).onClick((event) => {
$w( “#slideshow3” ).changeSlide( 0 )
.then((newSlide) => {
console.log(Done moving to ${newSlide.name});
});
});

$w( "#Button2" ).onClick((event) => { 
    $w( "#slideshow3" ).changeSlide( 1 ) 
        .then((newSlide) => { 
            console.log(`Done moving to ${newSlide.name}`); 
        }); 
}); 
 $w( "#Button3" ).onClick((event) => { 
    $w( "#slideshow3" ).changeSlide( 2 ) 
        .then((newSlide) => { 
            console.log(`Done moving to ${newSlide.name}`); 
        }); 
});

});
$w.onReady( function () {
$w( “#Button1” ).onClick((event) => {
$w( “#slideshow3” ).changeSlide( 0 )
.then((newSlide) => {
console.log(Done moving to ${newSlide.name});
});
});

$w( "#Button2" ).onClick((event) => { 
    $w( "#slideshow3" ).changeSlide( 1 ) 
        .then((newSlide) => { 
            console.log(`Done moving to ${newSlide.name}`); 
        }); 
}); 
   $w( "#Button3" ).onClick((event) => { 
    $w( "#slideshow3" ).changeSlide( 2 ) 
        .then((newSlide) => { 
            console.log(`Done moving to ${newSlide.name}`); 
        }); 
});

});

2

It is not possible to have a button “clicked” on load, you can only mimic such behavior by setting the button’s style attribute to a the one that matches a “clicked” state. Check out this coding example that shows a similar functionality: https://www.wix.com/corvid/example/state-toggle
I can also see that you are using two onReady functions on your page. It is not recommended to use more than one onReady function on a page, as it may cause conflict in your code.