My first post. I see this error in another post but my code is slightly different and I am not smart enough to figure it out. It's for a toggle to show and hide text. Here's my code:
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 = 40; // read the full text and store it in the fullText variable fullText = $w("#text15").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("#text15").text = shortText; export function button1_click(event) { // display the full text $w("#text15").text = fullText; // collapse the button $w("#button1").collapse(); // check the contents of the text element if ($w("#text15").text === shortText) { // if currently displaying short text, display the full text $w("#text15").text = fullText; $w("#button1").label = "Show less"; } else { // if currently displaying full text, display the short text $w("#text15").text = shortText; $w("#button1").label = "Show more"; } }
It is clear 😉
This part of the tutorial presents the code that controls the "Show More" button.
You have two options:
The "Show More" button disappears once the full text is displayed.
The button toggles between "Show more" and "Show less."
Both options require an onClick event handler.
Anyways, regardless of that, glad you spotted your own mistake and it is all working for you now.
Nevermind! I figured out my problem. The instructions were unclear and I pasted two functions into one. If that makes sense.
Have you gone by the Wix tutorial for this option.
https://support.wix.com/en/article/corvid-tutorial-creating-a-show-more-link
As you are missing the pages onReady function.
$w.onReady(function () {
Hence your error: The element selector function (usually $w) cannot be used before the page is ready
See here for more info about the onReady page function. https://www.wix.com/corvid/reference/$w.html#onReady
Code for the "Show More/Show Less" Toggle Button (Static Text)
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) { //making sure that you have added the onClick event in properties // check the contents of the text element if ($w("#myTextElement").text === shortText) { // if currently displaying short text, display the full text $w("#myTextElement").text = fullText; $w("#myButton").label = "Show less"; } else { // if currently displaying full text, display the short text $w("#myTextElement").text = shortText; $w("#myButton").label = "Show more"; } }
Code for the "Show More" Button (Static Text)
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) { //making sure that you have added the onClick event in properties // display the full text $w("#myTextElement").text = fullText; // collapse the button $w("#myButton").collapse(); }
Code for the "Show More/Show Less" Toggle Button (Dynamic Text)
let fullText; // variable to hold the full text let shortText; // variable to hold the short version of the text $w.onReady(function () { $w("#dynamicDataset").onReady(function () { // how many characters to include in the shortened version const shortTextLength = 40; // set the fullText variable to be the text from the collection fullText = $w('#dynamicDataset').getCurrentItem().textField; // if no text to display, collapse the text element and the button if (!fullText) { $w('#myTextElement').collapse(); $w('#myButton').collapse(); } else { // if the text has fewer or the same number of characters as shortTextLength characters, display it as is and collapse the "Show More" button if (fullText.length <= shortTextLength) { $w('#myTextElement').text = fullText; $w('#myButton').collapse(); } else { // create the shortened version of the text and display it in the text element shortText = fullText.substr(0, shortTextLength) + "..."; $w('#myTextElement').text = shortText; } } }); }); //might need this extra line here export function mybutton_click(event, $w) { //making sure that you have added the onClick event in properties // check the contents of the text element if ($w("#myTextElement").text === shortText) { // if currently displaying short text, display the full text $w("#myTextElement").text = fullText; $w("#myButton").label = "Show less"; } else { // if currently displaying full text, display the short text $w("#myTextElement").text = shortText; $w("#myButton").label = "Show more"; } }