Issue
I know this question has been asked before, but mine is a bit different and I couldn’t find the solution myself. I have 2 divs: container and container2. container2 is hidden by default, so I want that every 60 seconds, container gets hidden and container2 gets displayed. I have worked around some of the code, and I believe I got close to the solution, but I didn’t quite get it, here is my code:
window.onload = function() {
setInterval(function() {
document.getElementById('container2').style.display = 'flex';
document.getElementById('container').style.display = 'none';
}, 60000);
};
#container {
display: flex;
}
#container2 {
display: none;
}
Right now, container is displayed when the website loads, then after 60 seconds, container2 is displayed, but it doesn’t go back to displaying container after 60 seconds. I understand why this is not working, I’m just not sure how to fix it. I left a small code snippet to demonstrate what I mean (I changed the time from 1 minute to 5 seconds for demonstration purposes)
window.onload = function() {
setInterval(function() {
document.getElementById('container2').style.display = 'flex';
document.getElementById('container').style.display = 'none';
}, 5000); // Changed the time from a minute to 5 seconds for this demonstration
};html, body {
font-family: Arial, Helvetica, sans-serif;
background-color: #343E59;
}
#container {
display: flex;
width: 800px;
margin: auto;
flex-direction: column-reverse;
justify-content: center;
color: white;
}
#container2 {
display: none;
width: 800px;
margin: auto;
flex-direction: column-reverse;
justify-content: center;
color: white;
}
.titles {
display: flex;
justify-content: space-evenly;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<link rel="stylesheet" type="text/css" href="style.css">
<title>Redmine Monitor</title>
</head>
<body>
<div id="container">
Container
</div>
<div id="container2">
Container2
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<script src="script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>Solution
A basic if statement solves this.
window.onload = function() {
setInterval(function() {
if (document.getElementById('container2').style.display == "flex") {
document.getElementById('container2').style.display = "none";
document.getElementById('container').style.display = "flex";
} else {
document.getElementById('container2').style.display = "flex";
document.getElementById('container').style.display = "none";
}
}, 5000);
Answered By – Muhammedogz
This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0