Second 'Show More' Button Doesn't React When Clicked

Ask the community
, ,
1

I have read through other threads on the topic and followed one of the tutorials. However, I haven’t found anyone else experiencing this particular problem and when I look at the working code I can’t find a difference between it any my own.

The first button works fine, wonderfully, beautifully. The second button, when clicked, does nothing. Pppfffft. Fart noise. Nothing.

I can use the “shorttexttwoLength = #” and that works correctly. I have no idea why the click function isn’t working.

This seems absurd, but is it possible that it doesn’t work because button2 is actually button22? There are not actually 22 buttons on the page, nor are there 31 text boxes. Does Wix just pitch a fit when it starts to label elements with such big numbers?

I’ve run through this code, line by line, over and over again. I took a rest, came back with fresh eyes, and did the same thing again. I think I even took the sample code and just replaced all the values and still.

Pppptttt.

I really have done my best. I just want this to work, I want to understand why it isn’t. But I’ve hit a wall and I don’t know what else to do now.

Thank you for reading.

// For full API documentation, including code examples, visit https://wix.to/94BuAAs
 let fullTextgrowingup = ""; // variable to hold the full text
 let shortTextgrowingup = ""; // variable to hold the short version of the text
 let fullTexttyler = "";
 let shortTexttyler = "";
$w.onReady(function () {
 // how many characters to include in the shortened version
 const shortTextgrowingupLength = 0;
 // read the full text and store it in the fullText variable
    fullTextgrowingup = $w("#text27").text;
 // grab the number of characters defined in shortTextLength and store them in the shortText variable
    shortTextgrowingup = fullTextgrowingup.substr(0, shortTextgrowingupLength);
 // set the contents of the text element to be the short text
    $w("#text27").text = shortTextgrowingup;
 
 const shortTexttylerLength = 0;
    fullTexttyler = $w("#text31").text;
    shortTexttyler = fullTexttyler.substr(0, shortTexttylerLength);
    $w("#text31").text = shortTexttyler;

 //TODO: write your page related code here...

});

export function button22_click(event) {
// check the contents of the text element 
if ($w("#text31").text === shortTexttyler) {
// if currently displaying short text, display the full text
$w("#text31").text = fullTexttyler;
$w("#button22").label = "Less";  
} else {
// if currently displaying full text, display the short text
$w("#text31").text = shortTexttyler;
$w("#button22").label = "Show More";
}}

export function button1_click(event) {
 // check the contents of the text element 
if ($w("#text27").text === shortTextgrowingup) {
 // if currently displaying short text, display the full text
  $w("#text27").text = fullTextgrowingup;
  $w("#button1").label = "Less";    
} else {
 // if currently displaying full text, display the short text
  $w("#text27").text = shortTextgrowingup;
  $w("#button1").label = "Growing Up";
}}
2

Make sure that button elements have the same element id name that is used in your code. You can find the id name by either clicking on the button and it will be shown in the top left corner, or look at the top of the properties panel and that elements id name will be shown there.

Then make sure that you have added the onClick event handler for each button through the properties panel and delete any duplicate code that might get entered at the bottom of your existing code.