let i = 0;
function change() {
if (i < res.length) document.getElementById("cont").style.backgroundImage = `url(static/letters/${res[i++]}.jpg)`;
}
window.onload = function() {
setInterval(change, 2000);
};
I want this change only once till all the images get displayed and then want the container empty. What's wrong with my code?
You can check this implementation
let i = 0;
let interval //the variable to keep the current interval
//simulate your `res` data
const res = [
"https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg",
"https://images.unsplash.com/photo-1612151855475-877969f4a6cc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8aGQlMjBpbWFnZXxlbnwwfHwwfHw%3D&w=1000&q=80",
"https://www.w3schools.com/w3css/img_lights.jpg"
]
function change() {
if (i < res.length) {
document.getElementById("cont").style.backgroundImage = `url(${res[i++]})`;
} else {
document.getElementById("cont").style.backgroundImage = "none";
clearInterval(interval); //remove the current interval after finish the loop
i = 0; //reset index value
}
}
window.onload = function() {
interval = setInterval(change, 2000); //set the current interval
};#cont {
height: 300px;
width: 300px;
background-position: center;
background-repeat: no-repeat;
background-size: 300px 300px;
transition: 0.2s;
}<div id="cont"></div>This might do the job :
if (i < res.length) document.getElementById("cont").style.backgroundImage = `url('static/letters/${res[i++]}.jpg')`;