Show different text on blink using Javascript?

Question

I want to show changing text in few second in only one div.

var blink_speed = 1000; // every 1000 == 1 second, adjust to suit
var t = setInterval(function () {
    var ele = document.getElementById('myBlinkingDiv');
     ele.style.visibility = (ele.style.visibility == 'hidden' ? '' : 'hidden');
}, blink_speed);

        <div id="myBlinkingDiv">Blink 0</div>
    	<div id="myBlinkingDiv1">Blink 1</div>
    	<div id="myBlinkingDiv2">Blink 2</div>
    	<div id="myBlinkingDiv3">Blink 3</div>
    	<div id="myBlinkingDiv4">Blink 4</div>
    	<div id="myBlinkingDiv5">Blink 5</div>
    	<div id="myBlinkingDiv6">Blink 6</div>
    	<div id="myBlinkingDiv7">Blink 7</div>
    	<div id="myBlinkingDiv8">Blink 8</div>
    	<div id="myBlinkingDiv9">Blink 9</div>
    	<div id="myBlinkingDiv10">Blink 10</div>

Mine is not working. I'm unable to run array here.

Do you want to have one div with changing text every few sec? Your question doesn't explain what you are trying to do. — GeekAb
– GeekAb, Commented Dec 22, 2016 at 10:25
Yes Sir, I want only one div with changing text every few sec. — Amar Prem
– Amar Prem, Commented Dec 22, 2016 at 10:26
Check my answer once, you dont need multiple div's and No Sir. :) — GeekAb
– GeekAb, Commented Dec 22, 2016 at 10:33

GeekAb · Accepted Answer · 2016-12-22 10:33:17Z

1

You actually don't need multiple div's.

Better create an array of all text you want to show and use javascript to change that.

Check my example : http://jsbin.com/napelobura/edit?html,js,output

<div id="text"></text>


var blink_speed = 1000;
var wordArray = ['One', 'Two', 'Three'];
var count=0;
var t = setInterval(function () {
    var ele = document.getElementById('text');

    ele.innerHTML = wordArray[count++];

   if(count===wordArray.length)
     count=0;

}, blink_speed);

What I am trying to do is, I am changing content of div every few second set by blink_speed and checking count for length of array.

answered Dec 22, 2016 at 10:33

GeekAb

5054 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Amar Prem Over a year ago

Thank you very much for helping me, Sir.

baao · Accepted Answer · 2016-12-22 10:30:21Z

1

For what you have posted, the following will do the trick:

var blink_speed = 1000; // every 1000 == 1 second, adjust to suit
var ele = document.getElementById('myBlinkingDiv');
var t = setInterval(function () {
     var number = parseInt(ele.innerHTML.replace(/\D/g, ""));
     if (number > 10) number = -1;
     ele.innerHTML = "Blink " + ++number;
}, blink_speed);

<div id="myBlinkingDiv">Blink 0</div>

Of course you can adjust this to change the text to something entirely different...

answered Dec 22, 2016 at 10:30

baao

73.5k18 gold badges152 silver badges209 bronze badges

Comments

Roshni Bokade · Accepted Answer · 2016-12-22 10:37:47Z

0

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <script>
       function start() {
           var i = 0;
           setInterval(function () {
               document.getElementById('myBlinkingDiv').innerHTML="Blink " + i;
               i = i + 1;        
           },1000);
       }
   </script>

</head>
<body>
    <input type="button" onclick="start();" value="Start"/>
  <div id="myBlinkingDiv"></div>
</body>
</html>

answered Dec 22, 2016 at 10:37

Roshni Bokade

3432 silver badges9 bronze badges

Collectives™ on Stack Overflow

Show different text on blink using Javascript?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related