Can I make one button toggle multiple events per click?

Ask the community
1

Hiyaaa,
I am wondering if I can make one button toggle different images with multiple clicks.
I’m not trying to make it scroll back and forth and I am not trying to make multiple things happen per click, it’s just that I can’t seem to get the event handler to make multiple clicks happen and I’m wondering if I’m doing something wrong.

2

Again you? :grinning:

$w.onReady(()=>{let counter = 0;
    $w('#button1').onClick((e)=>{console.log(e.target.id+'-clicked');
        hide_all images();
        counter = counter+1; console.log(counter);
       $w('#image'+counter).show();
    });

   $w('#button2').onClick((e)=>{console.log(e.target.id+'-clicked');
        hide_all images();
        counter = counter-1; console.log(counter);    
        $w('#image'+counter).show();
    });
});

function hide_all images() {
     $w('IMAGE').hide();  // <--- not sure if this was the right syntax here, check it.
}
  1. Place, 2 buttons onto your page —> ‘button1’ + ‘button2’
  2. Place 3 images onto your page ----> ‘image1’ + ‘image2’ + ‘image3’
  3. Add the code to your page
3

hello again, yes i think i finally understand the problem itself. when i press button1, it shows image1, when i press button2, it shows image2, but when i press button1 again it can’t SHOW image1 because image1 is already showing it’s just behind image2. duh.
ok so now i need button2 to show image2, but also hide image1. then i need button1 to show image2 and hide image1 on the SECOND click.
when i just have hide image2 and show image 1, everything just stops working like it can’t hide an image already hidden and messes everything up instead of just not hiding the image you know?
im not sure whats going on there, but thats the problem im having.

4

This for you have a FUCTION, which first hides all of your images, before unhiding just one of them.

The process-flow is like following…

No matter which button was pressed 1 or 2, first the function will hide → ALL-BUTTONS <—
Then the image with the right COUNTER-NUMBER will be shown.

If you pressed 2-times the BUTTON1 then it will show → IMAGE2, if you press the BUTTON1 again → counter counts +1 up, before showing IMAGE3, the HIDE-FUNCTION again hides all IMAGES → then show ONLY IMAGE3.

Button2 do the OPOSITE —> it ----> COUNTS-DOWN.

Now first understand all the functionality !!!
Then improve the code, since the code is still nor perfect.

Also connect this post with your previous post and → DO NOT OPEN MULTIPLE POSTS ON THE SAME TOPIC !!!

5

i think i understand what you are saying, but the counters confuse me because i don’t want button1 to show image1 and then button2 to hide image1 i want button1 and button2 to work independent of each other. not like a next and previous button that scrolls through images.

6

like im super sorry dude, im just trying to understand whats going on. this is for fun and interesting to me. i really didnt think making 2 buttons do 2 different things would be so complicated.
why can’t i just make button2 hide image1 and show image2 on its own?
why doesnt this work:

$w.onReady(()=>{

$w(‘#button1’).onClick(()=>{
counter = counter + 1;
$w(‘#image3’).show();
});

$w(‘#button2’).onClick(()=>{
counter = counter + 1;
$w(‘#image3’).hide();
$w(‘#image4’).show();
});

$w(‘#button1’).onClick(()=>{
counter = counter + 2;
$w(‘#image4’).hide();
$w(‘#image3’).show();
});

$w(‘#button2’).onClick(()=>{
counter = counter + 3;
$w(‘#image3’).hide();
$w(‘#image5’).show();
});

so on and so forth.

7

If you want to do 2-different buttons 2-different things…

Then you can create two different-functions, running for each of the buttons…

$w.onReady(()=>{

    $w(‘#button1’).onClick(()=>{
        start_myFunction1();
    });

    $w(‘#button2’).onClick(()=>{
        start_myFunction2();
    });

});

Then you create the functions you want…

function start_myFunction1(){
    .....your function code here.....
}

function start_myFunction2(){
    .....your function code here.....
}

Inside of the functions you define what should happen, forch each of the button-clicks.
Add the logic you want into the functions…

$w.onReady(()=>{

    $w(‘#button1’).onClick(()=>{
        start_myFunction1();
    });

    $w(‘#button2’).onClick(()=>{
        start_myFunction2();
    });

});

function start_myFunction1(){
   $w(‘#image4’).hide();
    $w(‘#image3’).show();
}

function start_myFunction2(){
    $w(‘#image4’).show();
    $w(‘#image3’).hide();
}

Define exactly what should happen, when clicking button-1 for the first functions.
Do the same for the second one.

Write down your logic.