Hide/show elements depending on values

Ask the community
,
1

Hello,
I have a database with a field named rating with values from 1 to 5, and I have a dynamic page to display each item, so each page has a different value. What I’d like to do is hide and/or show a few elements/images depending on the number displayed in the page.
Any thoughts on how I might do this??
Thanks

2

Here is my prototype code, wich doesn’t seem to be working:

if ($w(‘#text17’) === “2”) {
$w(‘#vectorImage2’).show()
$w(‘#vectorImage3’).hide()
$w(‘#vectorImage4’).hide()
$w(‘#vectorImage5’).hide();

} else if ($w(‘#text17’) === “3”) {
$w(‘#vectorImage2’).show()
$w(‘#vectorImage3’).show()
$w(‘#vectorImage4’).hide()
$w(‘#vectorImage5’).hide();

} else if ($w(‘#text17’) === “4”) {
$w(‘#vectorImage2’).show()
$w(‘#vectorImage3’).show()
$w(‘#vectorImage4’).show()
$w(‘#vectorImage5’).hide();

} else if ($w(‘#text17’) === “5”) {
$w(‘#vectorImage2’).show()
$w(‘#vectorImage3’).show()
$w(‘#vectorImage4’).show()
$w(‘#vectorImage5’).show();
} else {
$w(‘#vectorImage2’).hide()
$w(‘#vectorImage3’).hide()
$w(‘#vectorImage4’).hide()
$w(‘#vectorImage5’).hide();
}

3

Hi Filipe,

Your if statements are missing the .text property . Try this.

if ($w('#text1').text === '5') {
4

Hi SharonD,
Thank you for your comment. Although adding that .text property didn’t fix it, it made me notice a different mistake: $w(‘#text17’) is referring to the text box in the page, and I want the values to change according to the value from the database (linked to that text box). Do you have any idea on how can I do this?

5

You do need the .text property, but you’re right that that’s not enough to fix it. You also need to add a dataset onReady function.

6

Ok, so what is happening now is that when I press the button to see the next dynamic page, the code will hide/show the elements from the value in the PREVIOUS page, so if the previous page had a value of 3 and this has a value of 1, the code will hide/show according to 3, and not 1 as I want it to. But in the next page it will hide/show according to 1, even though the page value is 4, and so on. What am I doing wrong?? This is what I have now:

$w.onReady( function ( ) {

$w(‘#dynamicDataset’).onReady ( ( ) => {

if ($w(‘#text17’).text === “2”) {
$w(‘#vectorImage2’).show()
$w(‘#vectorImage3’).hide()
$w(‘#vectorImage4’).hide()
$w(‘#vectorImage5’).hide();

} else if ($w(‘#text17’).text === “3”) {
$w(‘#vectorImage2’).show()
$w(‘#vectorImage3’).show()
$w(‘#vectorImage4’).hide()
$w(‘#vectorImage5’).hide();

} else if ($w(‘#text17’).text === “4”) {
$w(‘#vectorImage2’).show()
$w(‘#vectorImage3’).show()
$w(‘#vectorImage4’).show()
$w(‘#vectorImage5’).hide();

} else if ($w(‘#text17’).text === “5”) {
$w(‘#vectorImage2’).show()
$w(‘#vectorImage3’).show()
$w(‘#vectorImage4’).show()
$w(‘#vectorImage5’).show();
} else {
$w(‘#vectorImage2’).hide()
$w(‘#vectorImage3’).hide()
$w(‘#vectorImage4’).hide()
$w(‘#vectorImage5’).hide();
}
});
});

export function button1_click(event, $w) {

if ($w(‘#text17’).text === “2”) {
$w(‘#vectorImage2’).show()
$w(‘#vectorImage3’).hide()
$w(‘#vectorImage4’).hide()
$w(‘#vectorImage5’).hide();

} else if ($w(‘#text17’).text === “3”) {
$w(‘#vectorImage2’).show()
$w(‘#vectorImage3’).show()
$w(‘#vectorImage4’).hide()
$w(‘#vectorImage5’).hide();

} else if ($w(‘#text17’).text === “4”) {
$w(‘#vectorImage2’).show()
$w(‘#vectorImage3’).show()
$w(‘#vectorImage4’).show()
$w(‘#vectorImage5’).hide();

} else if ($w(‘#text17’).text === “5”) {
$w(‘#vectorImage2’).show()
$w(‘#vectorImage3’).show()
$w(‘#vectorImage4’).show()
$w(‘#vectorImage5’).show();
} else {
$w(‘#vectorImage2’).hide()
$w(‘#vectorImage3’).hide()
$w(‘#vectorImage4’).hide()
$w(‘#vectorImage5’).hide();
}
}

export function button2_click(event, $w) {

if ($w(‘#text17’).text === “2”) {
$w(‘#vectorImage2’).show()
$w(‘#vectorImage3’).hide()
$w(‘#vectorImage4’).hide()
$w(‘#vectorImage5’).hide();

} else if ($w(‘#text17’).text === “3”) {
$w(‘#vectorImage2’).show()
$w(‘#vectorImage3’).show()
$w(‘#vectorImage4’).hide()
$w(‘#vectorImage5’).hide();

} else if ($w(‘#text17’).text === “4”) {
$w(‘#vectorImage2’).show()
$w(‘#vectorImage3’).show()
$w(‘#vectorImage4’).show()
$w(‘#vectorImage5’).hide();

} else if ($w(‘#text17’).text === “5”) {
$w(‘#vectorImage2’).show()
$w(‘#vectorImage3’).show()
$w(‘#vectorImage4’).show()
$w(‘#vectorImage5’).show();
} else {
$w(‘#vectorImage2’).hide()
$w(‘#vectorImage3’).hide()
$w(‘#vectorImage4’).hide()
$w(‘#vectorImage5’).hide();
}
}

7

Is the whole thing inside a regular onReady()?

8

No, the Button Click events are both out.

9

Anyone else can help me? My time is short.

10

I can’t see anything that looks problematic. Maybe give us a link to your site and someone else can take a look

11

https://softtissue18.wixsite.com/soft-tissue/clientReview/Reviews

Here, its still not finished of course, but once you get in, keep clicking “Next” and look at the numbers near the stars. Also, the password is 123.

12

I even already tried different codes, but none seems to work… Thoughts?

13

Hi Filipe …

Here is a Review example provided by Wix. It has advanced coding:

Here is an example I created on a dynamic page, based on your design & code:
https://webixdesigns.wixsite.com/filipe

1920×1364 192 KB

Code:

$w.onReady(function ( ) {
  $w('#dynamicDataset').onReady ( ( ) => {
    showStars();
  });
});
 
function showStars () {
 if ($w('#titleText').text === "1") {
  $w('#star1').show();
  $w('#star2').hide();
  $w('#star3').hide();
  $w('#star4').hide();
  $w('#star5').hide();
} 
else if ($w('#titleText').text === "2") {
  $w('#star1').show();
  $w('#star2').show();
  $w('#star3').hide();
  $w('#star4').hide();
  $w('#star5').hide();
} 
else if ($w('#titleText').text === "3") {
  $w('#star1').show();
  $w('#star2').show();
  $w('#star3').show();
  $w('#star4').hide();
  $w('#star5').hide();
} 
else if ($w('#titleText').text === "4") {
  $w('#star1').show();
  $w('#star2').show();
  $w('#star3').show();
  $w('#star4').show();
  $w('#star5').hide();
} 
else {
  $w('#star1').show();
  $w('#star2').show();
  $w('#star3').show();
  $w('#star4').show();
  $w('#star5').show();
 }
}

So you see by the examples that there are many ways to accomplish what you are doing, it just depends on the design. Study the code to understand the logic behind it to guide you on creating new code or modifying your existing code.

Don’t just copy and paste … because then you will not learn.

Anyway, hope that helps you : )

14

This is not the right way to do it
https://www.wix.com/velo/reference/$w/ratingsdisplay/rating
use the rating element

15

@officebone2 This is a very old thread, and the RatingsDisplay Element was not available at that time.

This post will be closed for commenting.