user11877626
user11877626

Reputation:

How to use setTimeout and setInterval to display HTML content?

How to show the image for a few seconds and then hide it and show the rest HTML section.

Initially, I want to display the image for 2 seconds and hide the DIV till the time. After 2 seconds hide the image and display the div only.

What I tried using js

setTimeout(() => document.getElementById('Image').style.display = 'block', 2000);
setInterval(() => document.getElementById('Item').style.display = 'none', 2000);
<div id="Image">
  <img src="../img-correct.png" alt="image">
</div>
<div class="item" id="Item">
  <h3>Time:</h3>
</div>

I am getting the div first then after 2 seconds I am getting an image.

Upvotes: 1

Views: 2173

Answers (5)

x03r4
x03r4

Reputation: 11

Set image display to: 'block' and item display to: 'none' then change both after 2000ms.

const item = document.getElementById('Item');
item.style.display = 'none';

const image = document.getElementById('Image');
image.style.display = 'block';

setTimeout(() => {
  item.style.display = 'block';
  image.style.display = 'none';
}
 ,2000);

Upvotes: 1

Roko C. Buljan
Roko C. Buljan

Reputation: 206348

Using Promise and Element.classList's toggle():

const wait = ms => new Promise(fn => setTimeout(fn, ms));

const toggle_content = () => {
  document.querySelector('#Image').classList.toggle("u-none");
  document.querySelector('#Item').classList.toggle("u-none");
};

wait(2000).then(toggle_content);
/* Utility Classes */

.u-none {
  display: none;
}
<div id="Image"><img src="//placehold.it/100x100/0bf" alt="image"></div>
<div id="Item" class="u-none"><h3>HELLO</h3></div>

The best part of the above is that by setting initially an element class as u-none JS will not cause flicks of content.

Upvotes: 1

<div id="image">
  <img src="../img-correct.png" alt="image">
</div>
<div class="item" id="item">
</div>
// setTimeout allows us to run a function once after the interval of time.
// setInterval allows us to run a function repeatedly, starting after the interval of time, then repeating continuously at that interval.

// displayed and removed after 2seconds
setTimeout(() => document.getElementById('image').style.display = 'none', 2000);

// Waiting 2 seconds to add text to your div with id of "item" (happening once => setTimeout)
setTimeout(() => document.getElementById('item').innerHTML = "time:", 2000);

Codepen => https://codepen.io/zibobilo/pen/WNxvqPL

Upvotes: 0

Derek Wang
Derek Wang

Reputation: 10204

On loading, you need to show image and hide the item. And on setTimeout callback, hide the image and show the item as follows.

FYI, setTimeout callback is only called one time after the timeout but setInterval callback is called periodically based on the time mentioned on second param.

document.getElementById('Image').style.display = 'block';
document.getElementById('Item').style.display = 'none';

setTimeout(() => {
  document.getElementById('Image').style.display = 'none';
  document.getElementById('Item').style.display = 'block';
}, 2000);
<div id="Image">
  <img src="../img-correct.png" alt="image">
</div>
<div class="item" id="Item">
  <h3>Time:</h3>
</div>

Upvotes: 1

SomoKRoceS
SomoKRoceS

Reputation: 3043

You can handle a variable as the boolean state of what component will be displayed right now. Then in setInterval, using the variable, display the element you want each call. Like this:

var imageShow=true;

document.getElementById('Item').style.display = 'none';
document.getElementById('Image').style.display = 'block';

setInterval(() => {
document.getElementById('Image').style.display = imageShow?'none':'block';
document.getElementById('Item').style.display = imageShow?'block':'none';
imageShow=!imageShow;
}, 2000);
<div id="Image">
  <img src="../img-correct.png" alt="image">
</div>
<div class="item" id="Item">
  <h3>Time:</h3>
</div>

Upvotes: 0

Related Questions