One Function for Multiple Buttons

Ask the community
,
1

Hi All,

I’ve found multiple references on how to use one function to impact every single button but I cannot get it to work.

 let btnArr = $w("Button");
 btnArr.forEach(btn => {
   btn.onClick(event => {
     btn.hide("fade", fadeOptions);
   })
})

The result is suppose to be when I click on the button it disappears revealing the text underneath.
If anyone has a better idea please let me know.

I’ve got it to work with just one button but I’m trying to find a more elegant solution to impact all the buttons instead of copy and pasting and changing the button it targets 20 times.

Any ideas why this isn’t working would be much appreciated!

Please see some references I looked at but couldn’t get working following:

2 
 $w("Button").onClick(event => $w("#" + event.target.id).hide());
3

Hi J.D.,

Didn’t seem to work and I understand the logic of where you’re trying to go with this. But didn’t work. I tried copying and pasting exactly what you have and no luck. I’ve also tried changing to this

 let btnArr = $w("Button");
    btnArr.forEach(btn => btn.onClick(event => (btnArr + event.target.id).hide("fade", fadeOptions)))

I only plan on having this one button for each of the text I want to cover.

4

@sirblops The code I posted does work.
You can see it here:
https://jonatandor35.wixsite.com/test/hide

But if you prefer to use explicit .forEach() you can do:

let btnArr = $w("Button");
btnArr.forEach(btn => btn.onClick(() => btn.hide()));
5

@jonatandor35 I’ve done some more tests even copied and pasted what you provided in your example and when I try to preview the site it gives me this error.

TypeError: $w(…).onClick is not a function

$w.onReady(() => {

  $w("Button").onClick(event => $w("#" + event.target.id).hide());

 let fadeOptions = {
 "duration": 500,
 "delay":    0
    };

 let btnArr = $w("Button");
    btnArr.forEach(btn => btn.onClick(() => btn.hide("fade", fadeOptions)));
 
});

This is what I have in the code editor and I’m at a lost of what could be different between mine and yours.

Appreciate the help.

6

Any news? I’ve tried a variety of cases even opening a new page and recreating your page but always the same problem.

7

Ok figured out an issue not sure if a bug or not but when I use $w(“Button”) it isn’t able to reference the buttons to be used which leads to nothing happening in a loop and why I’m getting the onClick is not a function.

Once that has been changed to:
[$w(“#button1”).onClick( (event) => {$w(“#” + event.target.id).hide(“fade”, fadeOptions)});]($w(“#button1”).onClick( (event) => {$w(“#” + event.target.id).hide(“fade”, fadeOptions)}):wink:

It works, can someone check if this is a bug?

I made another new page and got it to work how weird it doesn’t work on the other page…

8

@jonatandor35 Thanks for the info here. Works great.

I was wondering if it’s possible to use this method but also show the button that has been hidden if another button is pressed? i.e. one button is hidden but when you click another button is hides that button that has been clicked but shows the previously hidden button, so only one hidden button at a time.

Or would it be best to use a loop?

9

This seemed to do the trick, unless you think the solution could be better?

function btnBehaviour() {
 let menuBtnIds = ['detailsMenuBtn1', 'detailsMenuBtn2', 'detailsMenuBtn3', 'detailsMenuBtn4', 'detailsMenuBtn5', 'detailsMenuBtn6'];
    menuBtnIds.forEach((button) => {
    $w(`#${button}`).onClick((event) => {
        console.log('button', event.target.id);
        $w(`#${button}`).hide();
    });
    $w(`#${button}`).show();
})
10

@stephenmccall I think your code is not what you wanted (maybe I misunderstood you). I thought you want:

function btnBehaviour() {
 let menuBtnIds = ['detailsMenuBtn1', 'detailsMenuBtn2', 'detailsMenuBtn3', 'detailsMenuBtn4', 'detailsMenuBtn5', 'detailsMenuBtn6'];
    menuBtnIds.forEach((button) => {
    $w(`#${button}`).onClick((event) => {
	menuBtnIds.forEach(b => $w("#" + b).show());
        $w(`#${button}`).hide();
    });
})