Change Text at Set Intervals - Assistance

Discussion Ask a question
, ,
1

Hi! I am looking for some guidance on how to change text (an array of words) at set intervals. Disclosure: I have very limited experience with code, and may very well need to engage an expert to do it for me. Thought I’d reach out to the forum and give it a try myself first.

On my home page hero section I would like to have an array of words (within a sentence) continuously change at a set interval. So, for example only: the words " we are " will remain constant in one sentence and the array of words (below in italics) would change at set intervals, say 1-2 seconds. Ideally, the array of words would each have a different color.
We are bold
changes to
We are innovative
changes to
We are whatever
changes to
We are not good at coding

Appreciate guidance and input from the forum members.
KT

2

Lol, I like the honesty of that last one.
1st. Store your shifting terms in an array and give it a name:

const myArray = ["bold", "innovative", "whatever", "not good at coding"];

2nd. Set an index and increase the index with each cycle:

let index = 0;
setInterval(function() {
    index++;
}, 2000); //2000 milliseconds = 2 seconds

3rd. Call our function when the page is ready, and change the text inside the interval:

$w.onReady(function() {
    let index = 0;
    setInterval(function() {
  $w('#textElementName').text = 'We are ' + myArray[index++ % myArray.length];        
    }, 2000);
});

If you want to have it change color, you have to use html:

3

I will give it a shot, appreciate your help! Yeah, I am a newbie and have no problem poking fun at myself :wink:

4

So, I am getting there, although not all the way and would appreciate some additional assistance – still learning :wink:
I’ve tried searching the forum and also the coding site(s) referenced here frequently and still just don’t get it.

Current situation: Out of the 4 terms in the array, only two populate in the preview (“whatever” and “not good at coding”) – how fitting, right!

I think i am grasping the first part about establishing the array (the shifting terms), the time part of the interval (2000=2secs), and how to determine the text element name
– other than that, not so much especially not getting the + myArray[index++ % myArray.length];
}, 2000);
});

I am just not grasping what the [index++ % myArray.length] does

  1. Do I have to assign anything to each of the terms in myArray?

  2. Could it have anything to do with the interval amount I am using (2 secs)?

Again, thanks in advance for your guidance – I can imagine it gets old helping us newbies

5

UPDATE: So, I have the code as @David - SKmedia shared working on my site (thank you!!), however, I would like to understand something so hoping an expert here can help me learn. I am uploading the image of the code as it appears in my site that that works, however, with a caution message.

You will notice I receive a “caution” message that states ‘index’ is already declared in the upper scope. If I leave the code in exactly as it appears (leaving the caution line in), my words appear at every interval just as they are sequenced in the const myArray – which is great; however, if I delete the line of code where the caution flag is, the only two words that appear in preview mode are the second and fourth, respectively (“innovative” and “not very good at code”.

While I have it working, I don’t understand why it works with the caution the way it does and why it works the other way when I delete the caution line. Just trying to learn some of the concepts of coding and hoping someone can put it in layman terms. Thank you in advance!

777×266 43.1 KB

6

Glad i’s working! But yes, it does need to be cleaned up. Let is a term that is used to define a variable, so what you’ve done is define the variable index, but you cannot create two variables with the same name, as it can obviously create a lot of conflict.

Meanwhile, myArray[index++ % myArray.length] should be on the same line for readability. You don’t have the same space limitations in the code panel as I do here.

myArray [/this indicates a specific position in the array/] so myArray[0] is the first item, myArray[1] is the second…etc.

index++ is our index that increments by 1 each time the interval runs. Another way to write the same thing would be index += 1 or index = index + 1.

The % operand gives you the remainder of a division. myArray.length is the length of the array. So 0 % 4 is 0, 1 % 4 is 1, 5 % 4 is 1, etc. If you were to leave this part out, you’d eventually be asking the code to get the 5th item in a 4 item array which it can’t do.

You should only have one interval in your code, the third part of my previous post is the only part you should have in your code aside from myArray.

7

Thanks a million for your explanation @David - SKmedia! Does this look better? Appreciate your help!

953×158 30.7 KB

8

Yes, much cleaner! By the way that ellipsis in between two arrows facing away from each other in the toolbar will automatically format your code. Makes life easier.

1 Like
9

Hi, I tried code and it works great. thank you.
I have one question maybe you can help.
so in my case, I want phone numbers to change every week.
It is working but I want all 3 numbers to be linked. so when someone presses it the phone will automatically dial it.
I did it from the editor but the editor can do it only for one number. how can I link each number to these 3 numbers? is it possible?

714×484 28.9 KB