Making Text Auto Change and Randomize

Question

How to set Auto change text in 2 second and Make output in "Marquee" ?

var greetings = [ "text1", 
"text2", 
"text3", 
"text4", 
"text5", 
"text6", 
"text7", 
"text8", 
"text9", 
"text10"
];
var greeting_id = Math.floor(Math.random() * greetings.length);
document.getElementById('textme').innerHTML = greetings[greeting_id];

<div id="textme"></div>

Take a look at the docs of `setTimeout` or `setInterval`. – ibrahim mahrir Aug 25 '17 at 17:57 — ibrahim mahrir, Aug 25 '17 at 17:57

z3nth10n · Answer 1 · 2017-08-25T19:01:30.363

Well you can use setInternal function:

https://www.w3schools.com/jsref/met_win_setinterval.asp

As this:

setInterval(changeText, 2000);

function changeText() 
{
    var greeting_id = Math.floor(Math.random() * greetings.length);
    document.getElementById('textme').innerHTML = greetings[greeting_id];
}

This will call the function every 2 seconds or 2000 milliseconds as you can see.

And for the marquee you can put a marquee and then your div:

https://www.tutorialspoint.com/html/html_marquee_tag.htm

As this:

<marquee><div id="textme"></div></marquee>

Final result:

var greetings = [ "text1", 
"text2", 
"text3", 
"text4", 
"text5", 
"text6", 
"text7", 
"text8", 
"text9", 
"text10"
];

//Maybe this is clearer for you...
setInterval(changeText, 2000);

function changeText() 
{
    var greeting_id = Math.floor(Math.random() * greetings.length);
    document.getElementById('textme').innerHTML = greetings[greeting_id];
}

//But you also can use:

/*
setInterval(function () {

}, 2000);
*/

//As you can see in other answers. :)

<marquee><div id="textme"></div></marquee>

A last advice, marquee is an obsolete tag, so I recomment you this: CSS3 Marquee Effect

If you want to show a different text every loop maybe you are looking for a slider.

Take a look at this: http://designify.me/code-snippets-js/simple-marquee-horizontal-text-scrolling-with-jquery/#.WaBs-ChJaHs

And also, you can change the marquee interval, this is not recommended because in long screens the text will be difficult to read:

http://www.plus2net.com/html_tutorial/html_marquee_speed.php

I have done this for you:

var greetings = [ "text1", 
"text2", 
"text3", 
"text4", 
"text5", 
"text6", 
"text7", 
"text8", 
"text9", 
"text10"
];

var msecs = 2000; //Milliseconds that will wait to change the text
var marq = document.getElementById("marq"); //The object
var pix = marq.clientWidth; //The width in the screen

//You have to vary this... If you know a little bit of maths they can help you.
marq.scrollAmount = (pix / (msecs / 50));

setInterval(function() 
{
    var greeting_id = Math.floor(Math.random() * greetings.length);
    document.getElementById('textme').innerHTML = greetings[greeting_id];
}, msecs);

<marquee id="marq"><div id="textme"></div></marquee>

I hope it works for you, If you need any other explanation please say to me, if this is resolved for you, please make as solved! And, well, maybe you need some other explanation over the setInterval method, so tell us if this is enough. @YudhiSaputra — z3nth10n, Aug 25 '17 at 18:06
@Mr.Ikillnukes, How do I make the following text change along with the marque value? — Yudhi Saputra, Aug 25 '17 at 18:29
You mean that everytime it appears it appears a new text? @YudhiSaputra — z3nth10n, Aug 25 '17 at 18:30
yes, Text changed simultaneously at the start of the marque. @Mr.Ikillnukes — Yudhi Saputra, Aug 25 '17 at 18:34
This a difficult task, because you need information about the velocity of the animation, the different resolution of every user to calculate how many seconds needs the marquee to change the text. The work you are searching for is SLIDER, I have edited my answer. @YudhiSaputra — z3nth10n, Aug 25 '17 at 18:36
Sorry, what I mean is, the text changes according to the marquee interval. @Mr.Ikillnukes — Yudhi Saputra, Aug 25 '17 at 18:44
Well, I remember also that you can change the scrollAmount, with a little of math you can figure out something cool, so, I edited the answer, you only need to callibrate it, because this isn't. — z3nth10n, Aug 25 '17 at 19:02
nice, thanks, for help me solve this problem. @Mr.Ikillnukes — Yudhi Saputra, Aug 25 '17 at 19:20
Please, check my question as solved now! Thanks to you @YudhiSaputra — z3nth10n, Aug 25 '17 at 19:26

score 0 · Answer 2 · answered Aug 25 '17 at 18:00

marquee is an obsolete tag, only few browsers may support. Change div to marquee in your code & use setInterval to change text after every two seconds

var greetings = ["hello",
  "ciao",
  "welcome",
  "howdy",
  "greetings",
  "salut",
  "hallo",
  "hola",
  "Gday",
  "Hey"
];
setInterval(function() {
  var greeting_id = Math.floor(Math.random() * greetings.length);
  document.getElementById('textme').innerHTML = greetings[greeting_id];
}, 2000);

<marquee id="textme"></marquee>

score 0 · Answer 3 · answered Aug 25 '17 at 18:03

Try something like this:

var greetings = [ "text1", 
"text2", 
"text3", 
"text4", 
"text5", 
"text6", 
"text7", 
"text8", 
"text9", 
"text10"
];
var greeting_id = Math.floor(Math.random() * greetings.length);
document.getElementById('textme').textContent = greetings[greeting_id];

setInterval(function(){ 
  var greeting_id = Math.floor(Math.random() * greetings.length);
  document.getElementById('textme').textContent = greetings[greeting_id];
}, 3000);

<marquee id="textme">Change text between marquee tags</marquee>

score 0 · Answer 4 · answered Aug 25 '17 at 18:07

HTML

<marquee><div id="textme"></div></marquee>

JAVASCRIPT

var greetings = [ "text1", 
"text2", 
"text3", 
"text4", 
"text5", 
"text6", 
"text7", 
"text8", 
"text9", 
"text10"
];
setInterval(()=> {
    var greeting_id = Math.floor(Math.random() * greetings.length);
    document.getElementById('textme').innerHTML = greetings[greeting_id];
}, 2000)

If you dont want the marquee functionality, but just want to change the text at regular Intervals, remove the marquee tag from the HTML.

score 0 · Answer 5 · answered Aug 25 '17 at 18:17

var greetings = [ "text1", 
"text2", 
"text3", 
"text4", 
"text5", 
"text6", 
"text7", 
"text8", 
"text9", 
"text10"
];

//To change the text after 2 seconds
setTimeout(function(){
  var text = greetings[Math.floor(Math.random()*greetings.length)];
  document.getElementById('textme').innerHTML = text;                
},2000);

//To change the text every 2 seconds
setInterval(function(){
  var text = greetings[Math.floor(Math.random()*greetings.length)];
  document.getElementById('textme2').innerHTML = text;                
},2000);

<div id="textme"></div>
<div id="textme2"></div>

Making Text Auto Change and Randomize

5 Answers5