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”;
}
}
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. Wix Editor Elements ($w) - Velo API Reference - Wix.com
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";
}
}
Nevermind! I figured out my problem. The instructions were unclear and I pasted two functions into one. If that makes sense.
It is clear 
This part of the tutorial presents the code that controls the “Show More” button.
You have two options:
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.
Yes, I did read the Wix tutorial but was under the assumption I needed both bits of code for the button. In the meantime I somehow wrote over the onReady function and hadn’t even realized it until later. Thank you for replying.
@mcconnellsusan
Actually to be honest, we both made mistakes with this one…
I saw straight away that you didn’t have the onReady page function and simply glossed over the rest of the code thinking that it was all okay.
So what do they say, two wrongs make a right!