Wix code sdk warning

Ask the community
,
1

“the text parameter of “text9” that is passed to the text method cannot be set to null or undefined”

Here’s my code that I copied right off your site and made the correct changes.
Trying to make a show more/show less button for a text field. What did i miss?

Here is the link to the tutorial I used:

https://support.wix.com/en/article/corvid-tutorial-creating-a-show-more-link#part-3-controlling-the-button

export function button5_click(event) {
// check the contents of the text element
if ($w(“#text9”).text === shortText) {
// if currently displaying short text, display the full text
$w(“#text9”).text = fullText;
$w(“#button5”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#text9”).text = shortText;
$w(“#button5”).label = “Show more”;
}
}

2

Have you followed the tutorial correctly?
Have you entered your full text into the text element like it says in the tutorial?
Have you put all the code needed for this into your page tab?

As for code, paste it all and not just a little chunk as error might not be in your piece you supplied.

Full Code for the "Show More/Show Less" Toggle 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) {
//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";
}
}
3

Interesting… Forgive me for my ignorance. The first string of code was under the “site” portion of the code, and the problem that I posted was under the “page” portion. It worked like it should when I moved it all to the same place.

Next question. Should it all be under the “site” or under the “Page”? I’m building a one page site with anchors.

Also, I can only get the first one in the code to work.

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 = 40;
// read the full text and store it in the fullText variable
fullText = $w(“#text9”).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(“#text9”).text = shortText;

});

$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(“#text7”).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(“#text7”).text = shortText;

});

$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(“#text5”).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(“#text5”).text = shortText;

});

$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(“#text3”).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(“#text3”).text = shortText;

});

export function button5_click(event) {
// check the contents of the text element
if ($w(“#text9”).text === shortText) {
// if currently displaying short text, display the full text
$w(“#text9”).text = fullText;
$w(“#button5”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#text9”).text = shortText;
$w(“#button5”).label = “Show more”;
}
}

export function button6_click(event) {
// check the contents of the text element
if ($w(“#text7”).text === shortText) {
// if currently displaying short text, display the full text
$w(“#text7”).text = fullText;
$w(“#button6”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#text7”).text = shortText;
$w(“#button6”).label = “Show more”;
}
}

export function button7_click(event) {
// check the contents of the text element
if ($w(“#text5”).text === shortText) {
// if currently displaying short text, display the full text
$w(“#text5”).text = fullText;
$w(“#button7”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#text5”).text = shortText;
$w(“#button7”).label = “Show more”;
}
}

export function button8_click(event) {
// check the contents of the text element
if ($w(“#text3”).text === shortText) {
// if currently displaying short text, display the full text
$w(“#text3”).text = fullText;
$w(“#button8”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#text3”).text = shortText;
$w(“#button8”).label = “Show more”;
}
}

button5 and button8 work fine but the ones between them do not. However, button5 on the first click changes the text to the shortText version of button8 then the second click shows the rest of the text in button8. I have to be missing some sort of code that will allow the first clickevent to be read before going to the next.

4

I removed all the onclick events and deleted all the code. Started back the first button worked like it should. When i put the next string of code in for onclick event, it changed the first text to the second then worked like it should. How do i prevent this from happening?

5

This fixed it. I needed to declare different variables to then call upon later… newbie mistake. If I did anything unnecessary fill free to criticize. Thanks for the help!

let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text
let fullTextOne
let shortTextOne
let fullTextTwo
let shortTextTwo
let fullTextThree
let shortTextThree

$w.onReady( function () {
// how many characters to include in the shortened version
const shortTextLength = 50;
const shortTextOneLength = 50;
const shortTextTwoLength = 50;
const shortTextThreeLength = 50;
// read the full text and store it in the fullText variable
fullText = $w(“#text9”).text;
fullTextOne = $w(“#text7”).text;
fullTextTwo = $w(“#text5”).text;
fullTextThree = $w(“#text3”).text;
// grab the number of characters defined in shortTextLength and store them in the shortText variable
shortText = fullText.substr(0, shortTextLength) + “…”;
shortTextOne = fullTextOne.substr(0, shortTextOneLength) + “…”;
shortTextTwo = fullTextTwo.substr(0, shortTextTwoLength) + “…”;
shortTextThree = fullTextThree.substr(0, shortTextThreeLength) + “…”;
// set the contents of the text element to be the short text
$w(“#text9”).text = shortText;
$w(“#text7”).text = shortTextOne;
$w(“#text5”).text = shortTextTwo;
$w(“#text3”).text = shortTextThree;
});

export function button5_click(event) {
// check the contents of the text element
if ($w(“#text9”).text === shortText) {
// if currently displaying short text, display the full text
$w(“#text9”).text = fullText;
$w(“#button5”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#text9”).text = shortText;
$w(“#button5”).label = “Show more”;
}
}

export function button6_click(event) {
// check the contents of the text element
if ($w(“#text7”).text === shortTextOne) {
// if currently displaying short text, display the full text
$w(“#text7”).text = fullTextOne;
$w(“#button6”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#text7”).text = shortTextOne;
$w(“#button6”).label = “Show more”;
}
}

export function button7_click(event) {
// check the contents of the text element
if ($w(“#text5”).text === shortTextTwo) {
// if currently displaying short text, display the full text
$w(“#text5”).text = fullTextTwo;
$w(“#button7”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#text5”).text = shortTextTwo;
$w(“#button7”).label = “Show more”;
}
}

export function button8_click(event) {
// check the contents of the text element
if ($w(“#text3”).text === shortTextThree) {
// if currently displaying short text, display the full text
$w(“#text3”).text = fullTextThree;
$w(“#button8”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#text3”).text = shortTextThree;
$w(“#button8”).label = “Show more”;
}
}