I have a page function that shows and hides images every 5 seconds.
Instead of these two images, I need to open random images from the list each time.
I added an array with images, tried to add the creation of an image in the popup() function, and the removal of the hidePopup() function, but nothing happened.
var images = new Array("http://dummyimage.com/100x100/100/fff",
"http://dummyimage.com/100x100/304/fff",
"http://dummyimage.com/100x100/508/fff",
"http://dummyimage.com/100x100/70B/fff",
"http://dummyimage.com/100x100/90F/fff",
"http://dummyimage.com/100x100/AA0/fff",
"http://dummyimage.com/100x100/CB0/fff",
"http://dummyimage.com/100x100/EC0/fff");
var randomImage = Math.floor(Math.random() * images.length);
popup();
function popup() {
document.getElementById("disclaimer").style.display = "block";
setTimeout(hidePopup, 5000);
}
function hidePopup() {
document.getElementById("disclaimer").style.display = "none";
setTimeout(popup, 5000);
}
<div id="disclaimer">
<div><img src="http://dummyimage.com/100x100/100/fff"></div>
<div><img src="http://dummyimage.com/100x100/304/fff"></div>
</div>
<div id="disclaimer"></div>
const el = document.getElementById("disclaimer");
const img = document.createElement('img')
function popup() {
randomImage = Math.floor(Math.random() * images.length)
img.setAttribute('src', images[randomImage])
img.setAttribute('alt', 'random')
el.appendChild(img);
setTimeout(hidePopup, 1000);
}
function hidePopup() {
setTimeout(popup, 1000);
}
popup()
Note : In setTimeout function don't call the handler like that
setTimeout(hidePopup(), 1000);
that will cause Maximum call stack size exceeded error and you app will crashed
Set a promise then change the image randomly every N milliseconds.
const images = ["http://dummyimage.com/100x100/100/fff",
"http://dummyimage.com/100x100/304/fff",
"http://dummyimage.com/100x100/508/fff",
"http://dummyimage.com/100x100/70B/fff",
"http://dummyimage.com/100x100/90F/fff",
"http://dummyimage.com/100x100/AA0/fff",
"http://dummyimage.com/100x100/CB0/fff",
"http://dummyimage.com/100x100/EC0/fff"
];
const id = "disclaimer";
const imageElement = document.getElementById(id);
function wait(ms, value) {
return new Promise(resolve => setTimeout(resolve, ms, value));
}
function getRandomImageIndex() {
let randomImageIndex = Math.floor(Math.random() * images.length);
return randomImageIndex;
}
function setImage() {
let index = getRandomImageIndex();
var w = wait(5000, index);
w.then(function(index) {
console.log(index);
imageElement.setAttribute('src', images[index]);
}).then(function() {
imageElement.classList.toggle('hide-me');
return wait(5000, 1);
}).then(function() {
imageElement.classList.toggle('hide-me');
setImage();
});
}
// start it off
setImage();
.hide-me {
display: none;
}
<div id="disclaimer">
<div><img src="http://dummyimage.com/100x100/100/fff" alt="howdy"></div>
</div>
A better way to do this would be to change the source of the image.
var images = new Array("//dummyimage.com/100x100/100/fff",
"//dummyimage.com/100x100/304/fff",
"//dummyimage.com/100x100/508/fff",
"//dummyimage.com/100x100/70B/fff",
"//dummyimage.com/100x100/90F/fff",
"//dummyimage.com/100x100/AA0/fff",
"//dummyimage.com/100x100/CB0/fff",
"//dummyimage.com/100x100/EC0/fff");
popup();
function popup() {
randomImage = images[Math.floor(Math.random()*images.length)];
document.getElementById("changeThis").style.display = "block";
document.getElementById("changeThis").src = randomImage;
setTimeout(hidePopup, 5000);
}
function hidePopup() {
document.getElementById("changeThis").style.display = "none";
setTimeout(popup, 5000);
}
<img src="//dummyimage.com/100x100/100/fff" id="changeThis">
If you would prefer to not have the images disappear, you can remove style.display = "none";
, and replace setTimeout(popup, 5000);
with popup();
You should replace //
with https://
or http://
if this is being accessed as a file.