"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:
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"; } }
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"; } }
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?
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"; } }