Hi guys,
I’m not a developer but would like to think I can read a set of clear instructions and get a code right. I’m trying to create an expandable text where the page loads only the first 113 words with a ‘Show more/show less’ interchangeable button.
Below is my code but I am getting the following error message. Is anything jumping out as obviously wrong with my code? -
ERROR MESSAGE
"There was an error in your scriptError: The element selector function (usually $w) cannot be used before the page is ready
CODE let fullText; // variable to hold the full text let shortText; // variable to hold the short version of the text
// For full API documentation, including code examples, visit http://wix.to/94BuAAs
// how many characters to include in the shortened version const shortTextLength = 113;
// read the full text and store it in the fullText variable
fullText = $w(“#text14”).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(“#text14”).text = shortText;
// check the contents of the text element if ($w(“#text14”).text === shortText) {
// if currently displaying short text, display the full text
$w(“#text14”).text = fullText;
$w(“#button6”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#text14”).text = shortText;
$w(“#button6”).label = “Show more”;
}
Thanks Erez, and pardon my ignorance but how do I wrap it in exactly? I copied and pasted yours at the end and got a ‘parsing error: unexpected token’ message.
Thank you Or. Taking on your feedback, now this is my code and is still gives me parsing error and doesn’t work. It’s probably something really simple and stupid so any help appreciated.
{ let fullText; // variable to hold the full text let shortText; // variable to hold the short version of the text
// For full API documentation, including code examples, visit http://wix.to/94BuAAs
// how many characters to include in the shortened version const shortTextLength = 113;
// read the full text and store it in the fullText variable
fullText = $w(“#text14”).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(“#text14”).text = shortText;
// check the contents of the text element if ($w(“#text14”).text === shortText) {
// if currently displaying short text, display the full text
$w(“#text14”).text = fullText;
$w(“#button6”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#text14”).text = shortText;
$w(“#button6”).label = “Show more”;
}
I think you’re missing the export function line. You can copy and paste this. However, keep in mind I’ve altered a few things. You’ll have to change them to whatever parameters you need. I changed the short text length to 0. I got rid of the + “…”. And of course you’ll input whatever text element and button element you are using, not mine. The instructions on Part 3 of Wix’s tutorial are misleading. It should mention that you’re going to use either the code for the “show more” button OR the code for the “showmore/show less” button, not both. That’s what got me for a little while, but it did finally occur to me that it is conflicting code. <—not a coder. Haha, see if that works.
let fullText; // variable to hold the full text let shortText; // variable to hold the short version of the text
// For full API documentation, including code examples, visit Velo API Reference - Wix.com
$w.onReady( function () {
// how many characters to include in the shortened version const shortTextLength = 0;
// read the full text and store it in the fullText variable
fullText = $w(“#text13”).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(“#text13”).text = shortText;
});
export function button1_click(event, $w)
{
// check the contents of the text element if ($w(“#text13”).text === shortText) {
// if currently displaying short text, display the full text
$w(“#text13”).text = fullText;
$w(“#button1”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#text13”).text = shortText;
$w(“#button1”).label = “Show more”;
}