Change text with buttons

Ask the community
,
1

I read code on tutorial example for show and hide ELEMENTS.

Now I wanted change TEXTS and IMAGES with clicking same button and same times.

I tried some codes like this.

export function htu102_onClick(event) {
	$w("#text101").hide();
	$w("#text102").show();
};
// putted many text elements with hide on load checkbox option.
//#htu102 is the #ID of the button 

const htuTexts = {HTU101: "Step1-1", HTU102: "Step1-2"};
const htuTXSteps = ['HTX101', 'HTX102'];

function showTEXThtu(htuTXStep) {
	$w("#text101").text = htuTexts[htuTXStep];
}

export function htu101_onClick(event) {
	showIMAGEhtu('HTU101');
	showTEXThtu('HTX101');
}

plz help me.

2

Hi,
Can you please clarify what is the use case? What are you trying to achieve?

3

I’m looking for wix orignail code as this one.

<script type="text/javascript">
<!--
var htu101 = "STEP1-1";
var htu102 = "step1-2";
var htu103 = "step1-3";
function ChangeTxt(txt) {
  document.getElementById("text101").innerHTML=txt;
}
-->
</script>

<div id="text101">change texts here</div>

<a href="javascript:void(0)" onclick="ChangeTxt(htu101); return false;">button101</a>
<a href="javascript:void(0)" onclick="ChangeTxt(htu102); return false;">button102</a>
<a href="javascript:void(0)" onclick="ChangeTxt(htu103); return false;">button103</a>
4

Hey,
Do you wish to change the label of the button? If so, you can simply change the label of the button . If you wish to change a text element when clicking on the button, you should use the text property of a text element as you already did. If this is not the case, please send us a screenshot of the page so that I can better understand what you were referring.

Best,
Tal.

5

I cant not possibly use wix dataset, and dynamic page URL change.
need to change contents in light box.

1507×964 311 KB

6

Hey i think you can do it this way.
Create the things you want to be replaced, put them on the exact same location where the originals are and then set those secondary items texts etc. to :ballot_box_with_check: hidden on load. After that all you need to do is to hide and show items.

export function Yourbutton1_onClick() {
	$w("#yourtext2").hide();
	$w("#yournewtext2").show();
	$w("#yourtext3").hide();
        $w("#yournewtext3").show();
        $w("#yourimage4").hide();
        $w("#yournewimage4").show();
        $w("#youskipped5").hide();
        $w("#neverskip5").show();
        $w("#yourbutton6").hide();
 }
7 
 export function htu102_onClick(event) { 
  $w("#text101").hide(); 
  $w("#text102").show(); 
  }

I’ve tried. It did not work. May something wrong. ;(

8

You are probably just entering the code.

1357×586 120 KB

Activate the properties panel under: Tools > Developer Tools > Properties Panel
And assign a click event on your button through this properties panel. It will add the following code to your page:

export function htu102_click(event, $w) {
	//Add your code for this event here: 
}

add the elements you want to hide or show after a click under this code. Your final code should look like this:

export function htu102_click(event, $w) {
    $w("#text101").hide(); 
    $w("#text102").show();
}
9

I got the problem (won’t work show hide command ) only in ”LIGHTBOX” page.
tested this code in blank page. it works.

10

Hi,
If you wish to bind elements added to your lightbox with your DB collection, you should add the dataset to the lightbox as well. Note that you can also send information from the page to the lightbox using code (if needed) as explained here .

Best,
Tal.

11

how can i change content on a dynamic page by clicking on a particular option in dropdown list?