Can I display different text when blinking with Javascript?

Question

Can I display different text when blinking with Javascript?

I need to display text that changes every few seconds within a single 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>

Unfortunately, my code is not functioning correctly. I'm having trouble implementing an array here.

javascript arrays blink

Answer 1

Answer №1

You can achieve the same result without using multiple divs.

Instead, consider creating an array with all the text you want to display and utilize JavaScript to dynamically change it.

Take a look at this 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);

The goal here is to change the content of the div every few seconds based on the blink_speed variable and loop through the array using the count variable.

Answer 2

You can achieve the same result without using multiple divs.

Instead, consider creating an array with all the text you want to display and utilize JavaScript to dynamically change it.

Take a look at this 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);

The goal here is to change the content of the div every few seconds based on the blink_speed variable and loop through the array using the count variable.

Answer 3

Answer №2

To achieve what you've shared, you can use the following code snippet:

var blink_speed = 1000; // adjust to your desired speed in milliseconds
var element = document.getElementById('myBlinkingDiv');
var timer = setInterval(function () {
     var number = parseInt(element.innerHTML.replace(/\D/g, ""));
     if (number > 10) number = -1;
     element.innerHTML = "Blink " + ++number;
}, blink_speed);

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

Feel free to customize the code to display any other text you prefer...

Answer 4

To achieve what you've shared, you can use the following code snippet:

var blink_speed = 1000; // adjust to your desired speed in milliseconds
var element = document.getElementById('myBlinkingDiv');
var timer = setInterval(function () {
     var number = parseInt(element.innerHTML.replace(/\D/g, ""));
     if (number > 10) number = -1;
     element.innerHTML = "Blink " + ++number;
}, blink_speed);

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

Feel free to customize the code to display any other text you prefer...

Answer 5

Answer №3

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

</head>
<body>
    <input type="button" onclick="begin();" value="Begin"/>
  <div id="blinkingElement"></div>
</body>
</html>

Answer 6

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

</head>
<body>
    <input type="button" onclick="begin();" value="Begin"/>
  <div id="blinkingElement"></div>
</body>
</html>

Can I display different text when blinking with Javascript?

Answer №1

Answer №2

Answer №3

Similar questions

Retrieve information from XML using jQuery

Conceal and reveal submenu options

Is it feasible to duplicate only the content of an array?

The if-else statement is providing a misleading outcome

Can the HTML title attribute be customized?

I must utilize the MongoDB native driver to retrieve unique IDs sorted by a timestamp column

A regular expression in Javascript that can be used to identify at least one word starting with a number among multiple words, with a

Tips for avoiding the influence of the parent div's opacity on child divs within a Primeng Carousel

Identifying and implementing page language in nextJS: Solving the ReferenceError "window is not defined" issue

What is the proper way to reference a property's value within another property of the same JavaScript Object?

The system is unable to accept the Object ID

Create a bookmark system on an HTML page by utilizing the existing heading tags and implementing Javascript

JSON - When an Object's Value Matches

The parameter is causing the Aggregate Function to malfunction

Key factors to keep in mind when comparing JavaScript dates: months

The presence of asynchronous JavaScript can lead to errors due to missing functions in JavaScript

Ways to prevent decreasing the value below zero in ReactJS?

Clicking within the text activates the dropdown menu, but clicking outside the text does not

Struggling to successfully update a database using a combination of javascript and PHP

Implementing Hover Effect on Elements within Item template of GridView