"Show More" button says button is not defined

Ask the community
, ,
1

I need help with connecting the button to the text. It says that “#text1” (the text that I called it) is not defined as a “fullText”. I don’t know how to define #text1 to fullText. Here’s the code:

$w.onReady ( function (){
let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text
// how many characters to include in the shortened version
const shortTextLength = 80;
// read the full text and store it in the fullText variable
fullText = $w(“#text1”).text;
shortText = fullText.substr(0, shortTextLength) + “…”;
// set the contents of the text element to be the short text
$w(“#text1”).text = shortText;

});

export function button1_click(event) {
$w(“#text1”).text = fullText; #I’m having trouble with this line
// collapse the button
$w(“#button1”).collapse();
}

2

$w.onReady ( function () will be executed first, and “button1_click " will only be executed when the button was clicked.
so inside $w.onReady, the following line will set value of “fullText” first, to be the same as the “text” value of “text1” (which could be empty if not set initially)
fullText = $w(” #text1 ").text;

plus your “fullText” is only defined inside “onReady”, that’s why you can’t reference it inside button1_click, unless it’s a global variable, e.g. defined outside of $w.onReady

3

You need to move the onReady call down after the let fullt text and let short text lines of code, as described in the tutorial itself.
https://support.wix.com/en/article/corvid-tutorial-creating-a-show-more-link

Also, remember that the “Show More” button disappears once the full text is displayed.

Code for the “Show More” Button

let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text 

$w.onReady(function () {
// how many characters to include in the shortened version
const shortTextLength = 40;
// read the full text and store it in the fullText variable
fullText = $w("#myTextElement").text;
// grab the number of characters defined in shortTextLength and store them in the shortText variable
shortText = fullText.substr(0, shortTextLength) + "...";
// set the contents of the text element to be the short text
$w("#myTextElement").text = shortText;
});

export function mybutton_click(event, $w) {
//make sure that you have added the onClick event in properties
// display the full text
$w("#myTextElement").text = fullText;
// collapse the button
$w("#myButton").collapse();
}