How to loop changing text in a text box?

Ask the community
,
1

So I want to make a text in a text box keeps changing and changes back between two strings.

Two given strings, for example, “This” and " That" in one text box and i want to make them switch to one another after few seconds.

Is it possible to do it with Corvid?

Because I have tried something like

while (true) {
    if (textChanged) {
       setTimeout(() => {
          $w("textbox1").text = "This";
       }, 4000);
   } else {
      ... ...
   }
}

But it seems Wix does not allow infinite loop and I am stuck now.

Can anyone help? Thanks.

1 Like
2

Use setInterval()
https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval

3

Thanks, I will give it a try.

4

While I realise I’m posting to a 3 year old question, I find myself needing the exact same help. Jim, if you figured it all out, would you be so kind as to maybe share your code? I’m clueless, even after reading and watching video tutorials.

5

Updated

let i = 0;
let myText = ["this", "that", "they", "these"];
let duration = 2000;

$w.onReady(function () {
  //Set a default text or write from the editor because this will come out first
  $w('#textbox1').text = myText[0];
  
  setInterval(()=>{  
    changeText()
  }, duration)
});

function changeText(){
  $w("#textbox1").text = (myText[i]).toString();
  
  if(i < myText.length - 1){
    i++;
  } else {
    i = 0;
  } 
  
}
6

You can also try:

const texts = ['text1', 'text2'/*...add more if needed*/];
let i = 0;
const intervalInMilliseconds = 4000;
function changeText(){ 
    $w('#text1').text = texts[i];
    i = (i + 1) % texts.length;
}
$w.onReady(() => setInterval(changeText , intervalInMilliseconds));
7

@gelecegiyazmak Thank you kindly for the help Erdem, please forgive my ignorance, as I don’t have any coding fundamentals and know how. I’ve looked at the code you’ve provided me, and replaced the “textbox1” to the ID I have, which is “#speech1”. From there, I’m lost. And I get this error: “ReferenceError: changeText is not defined”

1531×783 92.7 KB

8

@jonatandor35 Brilliant, with your code, I got it working :slight_smile: A million and one thanks for your help JD, and to Erdem… lovely to see a community of friendly and helpful people. Hope to be apart of that one day where I can contribute back. Cheers guys!!!

9

@jonatandor35 I notice that the textbox settings, Ie: font type, size, color, etc… do not change and are not affected by the changes I make through the “box settings”, because the text is within the const texts = … Is there anyway to control any of those text attributes through the code? For example, if I needed just to add bold to the text, would that be possible? Many thanks again!

10

@valym777 Sorry i made a mistake in the codes, i updated it now, can you try again?

11

@valym777 You need to use (html) to change your text style.
You can find the details here: [html - Velo API Reference - Wix.com](You need to use (html) to change your text style. You can find the details here: html - Velo API Reference - Wix.com)

12

@valym777 it is possible to set different styling for the different texts. With html tags
For example:

const texts = ['<p>text1 regular</p>', '<p style="color:red">text2 <b>this is bold</b></p>'/*...add more if needed*/];
let i = 0;
const intervalInMilliseconds = 4000;
function changeText(){ 
    $w('#text1').html = texts[i];
    i = (i + 1) % texts.length;
}
$w.onReady(() => setInterval(changeText , intervalInMilliseconds));

You can add font-family/alignment/font-size etc. to the styling.

13

@jonatandor35 I owe you a couple of beers :beers: (At least :blush:) Thank you so much for taking the time, for not only answering, but giving me the exact answer I need, so I can understand how the code works. I’ve implemented it, works like a dream. The site is still under development (design wise), but here’s a little captured video to see the code in action… Thanks again J.D.

14

@valym777 You’re welcome (the video is not there btw, but I’m glad to here it worked for you).