CODEWITHSUNDEEP
javascripthtmlarraysstringdisplay
Mohammed Babach
Mohammed Babach

Reputation: 13

How to display multiple strings one by one with javascript

So, what i want to make a simple web page that display multiple texts from an array one after one , I ve tried so many ways SetTimeout , Set interval and nothing work it give me only the last word like that the loop turn all times and give me the last result

<h1 class="name" id="text"></h1> html code
<script>
var cars = ["Saab", "Volvo", "BMW"];
var i  = 0 ;
setTimeout(function loop(){
do {
document.getElementById("text").innerHTML = cars[i];
i++;
}
while (i < cars.length);  
},4000)
</script>

Upvotes: 1

Views: 2108

Answers (9)

amitk7407
amitk7407

Reputation: 1

Try this:

<h1 class="name" id="text"></h1> html code
<script>
    var cars = ["Saab", "Volvo", "BMW"];
    var i  = 0 ;
    const timer = setInterval(function () {
        if (i < cars.length) {
            document.getElementById("text").innerHTML += cars[i] + <br>;
            i++;
        }
        else {
            clearInterval(timer);
        }
    }, 4000)
</script>

Upvotes: 0

xdeepakv
xdeepakv

Reputation: 8125

You can use an incremental timeout for different text. They will print in the different timelines.

var cars = ["Saab", "Volvo", "BMW"];
    cars.forEach((car, index) => {
      setTimeout(function loop() {
        document.getElementById("text").innerHTML = car;
      }, index * 2000)
    })
<h1 class="name" id="text"></h1>

If you want to learn async programming, You can do the same thing using async-await. Please have a look below example.

// Print function which prints after 1 sec.

  const print = (car) => {
      return new Promise(resolve => {
        setTimeout(() => {
          // Print here
          document.getElementById("text").innerHTML = car;
          resolve()
        }, 1000)
      })
    }

// Main function, Now consume it

async function main() {
  var cars = ["Saab", "Volvo", "BMW"];
  for (let index = 0; index < cars.length; index++) {
    await print(cars[index])
  }
}
main()

Working sample:

const print = (car) => {
  return new Promise(resolve => {
    setTimeout(() => {
      // Print here
      document.getElementById("text").innerHTML = car;
      resolve()
    }, 1000)
  })
}
async function main() {
  var cars = ["Saab", "Volvo", "BMW"];
  for (let index = 0; index < cars.length; index++) {
    await print(cars[index])
  }
}
main()
<h1 class="name" id="text"></h1>

Upvotes: 0

brk
brk

Reputation: 50291

Iterate the array and inside forEach callback use setTimeout.In that case there is no need of do & while loop.Since you want to display it once at a time with a delay , you need to change the timing value. You can do that by multiplying the index with constant time

var cars = ["Saab", "Volvo", "BMW"];
const element = document.getElementById("text");
cars.forEach((item, index) => {
  setTimeout(() => {
    element.innerHTML = item;
  }, index * 1000)
})
<h1 class="name" id="text"></h1>

Upvotes: 1

Emiel Zuurbier
Emiel Zuurbier

Reputation: 20934

There are so many ways to do this. One is to use setInterval and iterate over the array of cars at each interval. And after the iteration go to the next value by incrementing the iterator with one.

The example below uses a closure to keep the iterator variable in its own scope.

const cars = ["Saab", "Volvo", "BMW"];
const textElement = document.getElementById("text");

function carDisplayer() {
  let i = 0;
  return function(cars) {
    let interval = setInterval(() => {
      if (i < cars.length) {
        textElement.textContent = cars[i];
        i++;
      } else {
        clearInterval(interval);
        i = 0;
     }
    }, 1000);
  }
}

let displayCars = carDisplayer();
displayCars(cars);
<h1 class="name" id="text"></h1>

Upvotes: 0

anees
anees

Reputation: 1855

here are both possible solutions. if you want to stop at the last one. or if you want to show keep it in loop.

<h1 class="name" id="text"></h1> html code
<script>
var cars = ["Saab", "Volvo", "BMW"];
var i  = 0 ;
let currentIndex = 0;
let inter_ = setInterval(function loop(){
   if(currentIndex >= cars.length){
       // if you want to loop  then the following line
       currentIndex = 0;
       // if you want to stop at the last one then uncoment the following lines
      // return clearInterval(inter_);
   }

   showCar();
   
}, 4000)


function showCar(){
    document.getElementById("text").innerHTML = cars[currentIndex++];
}

showCar()    

</script>

Upvotes: 0

Xaver Fleer
Xaver Fleer

Reputation: 465

Here is a possible solution: 

var cars = ["Saab", "Volvo", "BMW"];
var i  = 0 ;
setInterval(function (){
document.getElementById("text").innerHTML = cars[i];
i++;
i = i%3;
}, 4000)
<h1 class="name" id="text"></h1>

The problem in your implementation was the do-while loop that iterates throught all elements at once.

If you use setInterval the whole function get's called every four seconds.

Upvotes: 0

Zain Ul Abideen
Zain Ul Abideen

Reputation: 1602

var cars = ["Saab", "Volvo", "BMW"];
var i  = 0 ;
function loop() {
document.getElementById("text").innerHTML = cars[i];
    if (++i < cars.length) {
        setTimeout(loop, 4000);
    }
};

loop();
<h1 class="name" id="text"></h1>

Upvotes: 0

D. Seah
D. Seah

Reputation: 4592

maybe you can set timer if there are car left to display

<h1 class="name" id="text"></h1> html code
<script>
var cars = ["Saab", "Volvo", "BMW"];
var i  = 0 ;

function displayCar() {
    document.getElementById("text").innerHTML = cars[i++];
    if (i < cars.length) {
        setTimeout(displayCar, 4000)
    }
}

setTimeout(displayCar, 4000)
</script>

Upvotes: 0

Jinho Jang
Jinho Jang

Reputation: 175

if you use innerHTML with =, it replace new value.

So, 'text' element's innerHTML will be changed Saab->Volvo->BMW.

It's last word. right?

Try like this,

var cars = ["Saab", "Volvo", "BMW"];
let i  = 0 ;
setInterval(function loop(){
    document.getElementById("text").innerHTML += cars[i];
    i++;
},1000);

Upvotes: 0

Related Questions