CODEWITHSUNDEEP
javascripthtml
Yudhi Saputra
Yudhi Saputra

Reputation: 13

Making Text Auto Change and Randomize

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>

Upvotes: 1

Views: 1065

Answers (5)

z3nth10n
z3nth10n

Reputation: 2461

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>

Upvotes: 1

Alejandro Montilla
Alejandro Montilla

Reputation: 2654

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>

Upvotes: 0

rootkill
rootkill

Reputation: 629

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.

Upvotes: 0

Atlas_Gondal
Atlas_Gondal

Reputation: 2552

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>

Upvotes: 0

brk
brk

Reputation: 50326

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>

Upvotes: 0

Related Questions