Hiding elements not working

Ask the community
,
1

I can’t figure out why this isn’t working

let optionOne = $w ( ‘#btn1, #img1, #txt1’ );
let optionTwo = $w ( ‘#btn2, #img2, #txt2’ );
let optionThree = $w ( ‘#btn3, #img3, #txt3’ );

export function btn2_click ( event ) {
optionOne . hide ();
optionThree . hide ();
optionTwo . show ();

}

Any help is appreciated!

2

Hi Helena. It looks like you are trying to access the controls before the page has rendered. Try putting the code inside of the $w.onReady function. Your code should look something like this:

let optionOne = [];
let optionTwo = [];
let optionThree = [];

$w.onReady(function () {
optionOne = $w(‘#btn1, #img1, #txt1’);
optionTwo = $w(‘#btn2, #img2, #txt2’);
optionThree = $w(‘#btn3, #img3, #txt3’);
}

export function btn2_click(event) {
optionOne.hide();
optionThree.hide();
optionTwo.show();
}

3

Thank you, I changed my code and now it has red lines under .hide and .show. The error says 'Property ‘hide’ does not exists on type ‘any[]’. Do you know what I did wrong?

4

@decadthelena Can you post your latest code? Thanks!

5

@decadthelena I see where the problem is now. Since the control references are in an array, you’ll need to do a forEach() loop on the array to show or hide the control.

export function btn2_click(event) {
optionOne.forEach((item) => {item.hide()});
optionThree.forEach((item) => {item.hide()});
optionTwo.forEach((item) => {item.show()});
}

6

@robmich Thank you so much! It works now.