How do I enable multiple OnClick Events for one button?

[user1383]

Question:
I’m trying to get one button to execute multiple on click events.
i want to click one, have an image pop up. click again, make the previous image hide and have a new image pop up.
i want to click a different button and have a new image pop up, but hide the previous image.
seems pretty basic, but also what im struggling with is having both buttons work on my web page. right now one button pops an image, great.
the second button pops an image, but it overlaps the first image because i dont know how to hide it. not great.
but then i cant click the first button to pop the first image to overlap the second.
please help me im losing my mind.

Product:
Wix Website Editor

[CODE-NINJA]

1. Show a pic of your SETUP.
2. Show your already generated code.

[user1383]

i literally just have:
i have the images set to hidden already.

export function button1_click(event) {

$w(‘#image3’).show();

}

export function button2_click(event) {

$w(‘#image4’).show();

[CODE-NINJA]

DO NOT USE → EXPORT EVENT-TRIGGER-FUNCTION !!!

Instead do…

$w.onReady(()=>{

    $w('#button1').onClick(()=>{
        $w('#image3').show();
    });

    $w('#button2').onClick(()=>{
        $w('#image4').show();
    });

});

Let’s expand the functionality…

$w.onReady(()=>{let counter = 0;

	let imageData = [
		'https://img.freepik.com/free-photo/view-funny-monkey-with-mouth-open_23-2150758324.jpg',
		'https://t4.ftcdn.net/jpg/05/73/29/83/360_F_573298394_aSZmtISYIo9cGLoXwCx4lWOzDjDpO8mp.jpg',
		'https://wallpapers.com/images/featured/funny-monkey-pictures-gapupnyhalncb5nx.jpg'
	];

	//Show NEXT image ...
    $w('#button1').onClick(()=>{
		counter = counter + 1;
        show_image(imageData, counter);
    });

	//Show PREVIOUS image ...
    $w('#button2').onClick(()=>{
        counter = counter - 1;
		show_image(imageData, counter);
    });

});


function show_image(data, i) {
	$w('#image3').show();
	$w('#image3').src = data[i]
}

[user1383]

ok, so it works if i use your urls, but when i use my ‘#image3’ and ‘#image4’ elements, im back with the problem where button 1 works, button 2 doesnt.
i also need button 2 to display 3 separate images on multiple clicks.

[CODE-NINJA]

I gave you an working example.
All you have to do now, is…

a) first understand what’S happening in my provided code!
b) expanding it’s functionality by your own.

You see exactly how it is working for the first BUTTON (‘#button1’).

1. add another button…(‘#button3 + button4’) and use the same function for the 2 new buttons again, but this time using another image (‘#image-3’)

Or even include the image inside of the FUNCTION itself.

[user1383]

ah… also now all of my images are hidden and i cant bring them back this is a nightmare ;_;

[CODE-NINJA]

Show your SETUP on a screenshot!

I can’t see what you have in front of your eyes.
I do just → ASSUMTIONS.

The provided code is still not perfect, you will have to optimize it’s functionality.

[user1383]

Log In to Your Wix Account - Wix.com

this is what i mean with the buttons not working

[user1383]

er sorry this link.
https://bethwish.wixsite.com/hotdogporn

[CODE-NINJA]

I can’t login into your account

[CODE-NINJA]

Please show me the full code, running on this page (not as a pic).

…to be continued… (out of time)…

[user1383]

thank you very much for all of your help. i noticed the code you gave me is a scroll option but i dont want to cycle back and forth between images, i just want my buttons to toggle an image with multiple clicks not scroll through 4 of them and thats where im stuck.

[kreativthold]

Why not just use if/else statements?

OnClick:

• IF no image shows, show first image
• ELSE IF first image shows, hide first image and show second image
• ELSE IF second image shows, hide second image and show third image
• ELSE IF third image shows, hide third image and show fourth image
• ELSE hide all images

Is this what you’re looking for?

X

[user1383]

that sounds like it would work but im not sure what else/if looks like in wix.

[kreativthold]

It’s common JavaScript

If you want someone to write your code ask ChatGPT or hire someone.

I might want to do it at an hourly rate

Remember to mark a solution if you found one

X

[CODE-NINJA]

Instead of trying to describe your setup the technical way (what you are not really capable of) i would recommend you, just to describe what you are trying to achieve regarding your setup, shown on the following pic…

You must understand, that there could be a → BUNCH OF DIFFERENT SOLUTION POSSIBILITIES <— to solve your issue.

You have first to describe your setup in detail and mention all the elements which have been used in your SETUP.

For example…(what can be seen on my setup)…

1. Image-1 (BACKGROUND-LAYERED) → HEART
2. Image-2 (FOREGROUND-LAYERED) —> CAT-ICON
3. 2x Buttons —> Yes + NO

Now you should describe the function you want to be created in detail

SETUP-Description:
I want to generate a BUTTON-TOGGLE-FUNCTION.
Each time you swith between → BUTTON-1 and BUTTON-2 ← it should toggle between 2x different states, switching the BACKGROUND-IMAGE (and also the FOREFROUND-IMAG??? … or just FOREGROUND-IMAGE???,…or jsut BACKGROUND-IMAGE).

As you can see we already dive more into detail.

But wait, since you need a switch/toggle-function → why maybe not just using a → SITCH-BUTTON ← for your purposes. You would just need one button to realize your function. All you would have to do is to position 2x titles —> YES and NO (on left and right side of your switch).

And another question is →

i want to click one, have an image pop up. click again, make the previous image hide and have a new image pop up.

Why you always want to hide one image and show another?
You have the possibility to CHANGE the URL of the IMAGE → what has been shown already in my example. This way you need just one image for toggling-function (changing it’s URL only). Or 2-images if you want the toggle-function for BACK & FOREGROUND.

Using less elements on your Wix-Page → will increase the SPEED of your website!!!
Using more compact CODE on your website → will increase the SPEED of your website aswell!!!

How to create a simple button-toggle-function ?

$w.onReady(()=>{
    let button1_state = false;
    $w('#button1').onClick(()=>{
        if(button1_state===true) {button1_state=false; 
            console.log('State was setted to FALSE');}
        else {button1_state=true; 
            console.log('State was setted to TRUE');}
    });

});

If you want to achieve a different function, then please describe in detail the flow of your setup.

[user1383]

hi thank you very much i didnt know there would be many different ways to do something. i am not sure how to describe what im trying to figure out any other way than just making each button generate an image when clicked, then generate a different image when clicked again. i did not use URLs for it, i uploaded my pictures right onto the site so their IDs are literally just image1, image2, image3. etc. i played with the scrolling you showed me and got it to work, but i didnt want the buttons to show next and previous pictures, i just wanted it to show an image, then a second image when clicked again, and a third image when clicked a third time. but when i did that, the first button stopped working. i will try some of your ideas now.

[kreativthold]

It’s not a business plug, I normally don’t code for others, only for my own projects. It would be WORK for me to help you further, but I’ve provided you a very easy solution with the if/else solution.

I’m not going to spend more time than that and start writing your full code for free.

Maybe others will do that.

Good luck, I’m out.