html.replace not working?!?

Ask the community
,
1

I have the following function which is called once the repeater data has been finalised. All I want to do is change some of the repeater entry content based on a setting either being a value of 1,2,3 or 4. This is to show different types of entry in a different graphical way basically.
Based on the “type”, the function will change some of the settings of the elements within the repeater entry such as colour of title etc.
I’m just testing with the following at the moment and cannot get the html.replace piece to change the text of element named #text51 (the repeater entry business name).
The change of the element #text90.text works fine.

Any ideas what I’m doing wrong?

I have included the code below along with the html content before and after the html.replace code line.

function updateontype() {
	
	$w('#repeater3').forEachItem( ($w, itemData, index) => {
        if(itemData.listingLevel == 1) {
        	$w('#text90').text = "Basic/Free without Testimonial";
			console.log('type 1 selected');
			console.log($w('#text51').html);
			$w('#text51').html == 		  $w('#text51').html.replace("#000000","#f65757");
			console.log($w('#text51').html);
		}
		if(itemData.listingLevel == 2) {
        	$w('#text90').text = "Basic/Free with Testimonial";
			console.log('type 2 selected');
			console.log($w('#text51').html);
		}
		  if(itemData.listingLevel == 3) {
            $w('#text90').text = "Subscription/Paid";
			console.log('type 3 selected');
			console.log($w('#text51').html);
		}
		  if(itemData.listingLevel == 4) {
            $w('#text90').text = "Subscription/Free";
			console.log('type 4 selected');
			console.log($w('#text51').html);
		}
    } );
}

Console log of html before and after html.replace code:

type 1 selected
<h4 style="font-size:22px"><span style="font-size:22px"><span style="letter-spacing:0em"><span style="font-family:avenir-lt-w01_85-heavy1475544,avenir-lt-w05_85-heavy,sans-serif"><span style="color:#000000">Group SST</span></span></span></span></h4>
<h4 style="font-size:22px"><span style="font-size:22px"><span style="letter-spacing:0em"><span style="font-family:avenir-lt-w01_85-heavy1475544,avenir-lt-w05_85-heavy,sans-serif"><span style="color:#000000">Group SST</span></span></span></span></h4>
2

  1. Use strict mode. === not ==

  2. Use replaceAll .

  3. Make sure the itemData . listingLevel value is 1.

3

Also you used double == instead of a single = for the assignment.
It should be:

$w('#text51').html = $w('#text51').html.replaceAll("#000000","#f65757");
4

@jonatandor35 Thanks - now got this working.
I’d like to know if there’s an easier way to do this change as it seems a little cumbersome to have to change the html string if I’d like to change an attribute in this way!
Can I use something like the following in order to do the same thing, as I can’t seem to get this working!!!

$w('#text51').html.fontcolor('color: #f67656');

I ask this as I’m also looking to change other attributes if I can, so would like to know if there’s an easier way to change them.
The above doesn’t seem to work though - not sure why!

5

@paulgoodchild No. Not for text elements. You’ll have to use the html property.

6

@jonatandor35 Thanks JD. What if I’d like to change the height of the repeater item container (the actual box of the item) for example - is there a way to do that sort of change?

7

@paulgoodchild there isn’t a straightforward way to do it with Wix repeaters.
However, you can put a collapsed element in the repeater item, that fits to the bigger height, and once you wish to enlarge the height, make it expand and hidden (this way it’ll automatically enlarge to the hidden element height).
PS. this may not work correctly in preview mode, you should test it in live.