I need help figuring out how to make an image disappear on my website after 2 seconds.
I've searched online for solutions, but haven't come across anything helpful.
function rockImage() {
var img = document.createElement("img");
img.src = "rock.png";
var src = document.getElementById("compChoiceImage");
img.setAttribute("width", "100");
src.appendChild(img);
}
I'm hoping to enhance the function above by adding a timer to make the image disappear automatically.
Implementing setTimeout() along with removeChild():
function displayImage() {
const img = document.createElement('img');
img.src = 'https://via.placeholder.com/100';
img.setAttribute('width', '100');
const container = document.getElementById('div');
container.appendChild(img);
setTimeout(() => container.removeChild(img), 3000);
}
displayImage();<div id="div"></div>To hide an image after a certain time using the setTimeout function, you can set the display style to none:
function hideImage() {
var img = document.createElement("img");
img.src = "https://nyppagesix.files.wordpress.com/2018/04/gettyimages-901333660.jpg?quality=90&strip=all&w=618&h=410&crop=1";
var src = document.getElementById("compChoiceImage");
img.setAttribute("width", "100");
src.appendChild(img);
setTimeout(() => {
img.style.display = "none";
}, 2000);
}
hideImage();<div id="compChoiceImage"></div>My current project involves building a react app that visualizes real-time data from IoT sensors, including temperature, humidity, and pressure. I want the app to store this data so users can log in at any time to view specific information based on time, d ...
Currently, I'm experimenting with creating intricate scenes using Composer in three.js. I'm curious to know if it's achievable to switch between two scenes with distinct composer effects applied to them. To better understand this concept, I& ...
On my webpage, there is a poll form where users can vote and see the results through an ajax request. When a user votes, a cookie is created to prevent them from voting again upon returning to the page. However, I have encountered an issue with Firefox wh ...
My express server requires fetching data from multiple external sources for each request, with the logic separated into various routers (some of which are not under my control). These routers operate independently, eliminating the need for one to wait on ...
Within my component, I have two actions set to trigger upon mounting. These actions individually fetch data from the backend and require calling mutations. The issue arises when the second mutation is dependent on the result of the first call. It's cr ...
Currently, I am utilizing the angular5 framework in conjunction with the angular-highcharts library to generate a basic map based on the highcharts demonstration available at https://www.highcharts.com/maps/demo/category-map. Here is a snippet of the code: ...
I am currently developing a web framework and focusing on integrating XSS prevention measures. I have successfully implemented data escaping for database storage, but now I am faced with the challenge of allowing users to save generated HTML without riskin ...
I recently faced a challenge while attempting to make draggable elements within a div. The issue arose when I realized that I couldn't figure out how to drag each element individually without affecting the others. My current code only allows for handl ...
I'm completely lost here. It seems like there's a reference issue causing all data properties to be overwritten with the value of the last row. I need help figuring out how to iterate over a list of objects, using specific keys to assign data to ...
Version: 8.1.0 The prototype I am working with is as follows: String.prototype.toSlug = function () { return (<string>this) .trim() .toLowerCase() .replace(/\s+/g, '-') .replace(/[^\w\-]+/g, '') ...
Help needed with centering table header text. <table class="table table-bordered table-hover center-all" id="dataTable"> <thead> <tr> <th scope="col" style="text-align: center">Nam ...
I am currently working on a project that involves specific authentication which is functioning well in Ionic. My task now is to incorporate the same authentication system into the admin panel exclusively for web devices. I have already completed the instal ...
Currently, I am diving into the world of Grunt and attempting to integrate an Express server into my AngularJS application that was initially created with Yoeman. I've made adjustments to the following task as shown below: grunt.registerTask('s ...
Attempting to showcase a sphere using three.js, but encountering issues when rendering with canvasRenderer due to the appearance of grey lines on the sphere. View the code here: http://jsfiddle.net/jzpSJ/ See the screenshot here: However, when rendering ...
Hi there! I am currently working on creating a basic authentication login system using MongoDB and passport.js. The sign-up functionality is working fine, but I am facing issues with the login process. I have searched extensively online for a solution, but ...
I've developed a nodeJS application that involves creating a server in the file server.js. The code looks like this: http.createServer(app).listen(app.get('port'), function (err) { if (err) { console.error(err); } else { ...
I'm facing a situation where I have to search based on filtered values. Below is the code snippet var app = angular.module('MainModule', []); app.controller('MainCtrl', function($scope) { $scope.searchText = '& ...
I have encountered an issue while trying to authenticate the user upon loading and needing to run the authentication process in the pages/_app.js file. The error I am facing is useReduxContext.js:24 Uncaught Error: could not find react-redux context value; ...
I am looking to integrate JSON data into my website using AngularJs. Here is the approach I have taken: First, I created a database in phpMyAdmin. Next, I set up a table with two columns - subject and body. Should an id column be included? After work ...
In the following code snippet: Reviews.find({createdAt : {"$lt" : app.locals.lastDate}}), I am trying to dynamically change the $lt to $gt. app.post("/scroll", function(req, res){ console.log("req.body...", req.body); var sortCreate = req.body.old ...