let counter = 0;
function change() {
if (counter < results.length) document.getElementById("container").style.backgroundImage = `url(static/letters/${results[counter++]}.jpg)`;
}
window.onload = function() {
setInterval(change, 2000);
};
I am seeking a way for this change to occur only once until all the images are displayed. After that, I would like the container to be empty. Can you help identify any errors in my code?
You may want to take a look at this code snippet
let index = 0;
let interval //the variable to maintain 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 rotateImages() {
if (index < res.length) {
document.getElementById("cont").style.backgroundImage = `url(${res[index++]})`;
} else {
document.getElementById("cont").style.backgroundImage = "none";
clearInterval(interval); //remove the current interval after completing the loop
index = 0; //reset index value
}
}
window.onload = function() {
interval = setInterval(rotateImages, 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>Here is a possible solution:
if (i < res.length) document.getElementById("cont").style.backgroundImage = `url('static/letters/${res[i++]}.jpg')`;
I'm struggling to display an image on my website. I have the necessary code parts, but it's not working as expected. function showImage() { $('.img').addClass('display'); } function hideImage() { $('.img'). ...
After successfully recognizing the hover function, the console displays an error message: Uncaught TypeError: $ is not a function <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script> $(docume ...
For the past few days, I've been utilizing an ajax call to dynamically refresh specific elements of my webapp every 5 seconds. The implementation with setInterval(refreshElements, 5000) worked perfectly fine. However, now I am considering whether the ...
The VueJS Guide offers a clever method for using the item's index to create a delayed transition for the items in the data set. You can learn more about it here. While this approach works great when the data set remains static, I'm encountering a ...
I have a loaded page named tournament/:key, where a Tournament object is passed. The Jade template accesses variables from the Tournament using syntax like #{tournamentData.name} to display the data on the page. The list of matches is stored as an array wi ...
I created a script to close my div element by clicking on the 'x' icon, but instead of deleting the div only, the whole page gets deleted. I'm not sure where I went wrong, can anyone help me? HTML <div class="note"> <span id ...
Seeking advice on a function that should return a JavaScript object. function get_temp(){ var datasets_temp = { "sens1": {data: [[1340803113,22.9],[1340803474,23],[1340803836,23],[1340804197,23.1]] }, "sens2": {data: [[134084 ...
Looking for a solution to replace loading text with a button only after the image has loaded onto the page. Utilizing on.load as follows: $('img.house').on('load', function() { $('.loading').hide(); $('# ...
After loading a page dynamically, I found that only the contents of the div id="example" were being executed. However, the script tag inside the div was not being executed. I attempted to use eval to solve this issue, but it was unsuccessful. <div id=" ...
Is there a way to modify the placeholder text of a kendo multiselect widget using CSS? .k-multiselect-wrap > .k-input { color: #f02c0c; /* set the default input color */ content: "HOME"; } Unfortunately, this method does not achieve the desired ...
I have a collection created in collections.js portfolioItems = new Mongo.Collection('portfolioitems'); This collection is then subscribed to in subscriptions.js Meteor.subscribe('portfolioitems'); And published in publications.js M ...
I have created an app component and a test component. Within both components, I have included a console.log statement in the render method. Upon observation, I noticed that the app component is only rendered once, while the test component renders twice. Ad ...
Currently, I have set up a blog post edit page in my Next.js project. The post pages are utilizing the Incremental Static Regeneration feature with a revalidation time of 1 second for testing purposes. In the future, I plan to increase this to a revalidat ...
Seeking a way to optimize search engine results to display sub-links under the main homepage of a website. Attached is a screenshot illustrating the desired outcome when searching for a particular term. Appreciate any insights or solutions on achieving thi ...
I am working on a basic 1-series bar chart with nominal values for each bar. While I am able to plot it with data labels and axis showing the value of each bar, my goal is to display the percentage of the total series on these labels while keeping the nomi ...
Sorry if my terminology isn't quite right, I'm still new to fullstack development. Hello there! Currently, I am attempting to retrieve all users from my database. Upon executing the get() request, the client is receiving an OK response as shown ...
Starting Mike Bostock's tutorial on creating a map, but facing some installation issues at the beginning. I am using Windows 8.1 for this. This is the specific part that's causing trouble: "To get started, you'll need the reference implemen ...
I am looking to modify the overall state of Redux (commonly referred to as storage). Below is the code I have written: reducer export const user = (state = {}, action) => { console.log(4); console.log(action.type) console.log(action.payloa ...
Looking for a way to convert HTML into an image within an Ionic 4 application. I attempted to use html2canvas, however, it was unsuccessful and displayed the following message in the console: https://i.sstatic.net/4b4Sm.png Below is the code snippet I use ...
Does anyone have a solution for removing a half circle div from its parent (footer) to reveal the background underneath? I've searched for canvas and jQuery solutions but haven't found anything that works. I am aiming to achieve something simil ...