CODEWITHSUNDEEP
javascripthtmlcss
Pauliecode
Pauliecode

Reputation: 127

Hide one div and show another div every minute

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>

Upvotes: 0

Views: 461

Answers (5)

Andy
Andy

Reputation: 63524

Use a class to set the second container to hidden. You can then use querySelectorAll to pick up the containers, and then iterate over them to toggle them on and off. (I've used setTimeout here as I find it more intuitive.)

const containers = document.querySelectorAll('div');

function loop() {
  setTimeout(() => {
    containers.forEach(container => {
      container.classList.toggle('hidden');
    });
    loop();
  }, 1000);
}

loop();
div { display: flex; }
.hidden { display: none; }
<div>One</div>
<div class="hidden">Two</div>

Upvotes: 0

Vijay Kumawat
Vijay Kumawat

Reputation: 963

You have to toggle the display based on the current display of the container and container2 and also you have to set the initial displays either inline or here in javascript otherwise it won't return the c.style.display property.

window.onload = function() {
  const c = document.getElementById('container');
  const c2= document.getElementById('container2');
  c.style.display = 'flex';
  c2.style.display = 'none';
  setInterval(function() {
      c.style.display = c.style.display === 'none' ? 'flex' : 'none';
      c2.style.display = c2.style.display === 'none' ? 'flex' : '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>

Upvotes: 0

pbialy
pbialy

Reputation: 1083

change the function to:

setInterval(function() {
  const c1 = document.getElementById('container');
  const c2 = document.getElementById('container2');

  [c1, c2].forEach(el => {
    el.style.display = el.style.display === 'flex' ? 'none' : 'flex';
  })
}, 60000);

Upvotes: 0

mplungjan
mplungjan

Reputation: 177830

You are not toggling

Use a class

window.addEventListener("load",function() {
  const container = document.getElementById('container2'), container2 = document.getElementById('container');
  setInterval(function() {
    container.classList.toggle("hide")
    container2.classList.toggle("hide")
  }, 1000); 
});
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: flex;
  width: 800px;
  margin: auto;
  flex-direction: column-reverse;
  justify-content: center;
  color: white;
}

.titles {
  display: flex;
  justify-content: space-evenly;
}

.hide { display: none !important; }
  <div id="container">
    Container
  </div>
  <div id="container2" class="hide">
    Container2
  </div>

Upvotes: 3

Muhammedogz
Muhammedogz

Reputation: 792

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);

Upvotes: 4

Related Questions