CODEWITHSUNDEEP
javascriptfunctiontimecounter
Gideon de Vries
Gideon de Vries

Reputation: 21

javascript more functions in one time

for a school project i need to make a second screen for several devices. I will fake the screen changes by time. So lets say on 10 minutes it has to show this div id=one and on 20 minutes it has to show div id=two. unfortunately my code is not working and i cant find the problem. Maybe the way i think is also not correct.

Your feedback is welcome and many thanks in advance

  var counter = 0;
   var i = setInterval(function(){
    // do your thing

    counter++;
    if(counter === 1000) {
        document.getElementById("DoeDitVooralWelThuis").style.display ="block";
      document.getElementById("remaintime").style.display ="none";
    }
    counter++;
    if(counter === 2000) {
        document.getElementById("ExperimentArea").style.display ="block";
      document.getElementById("DoeDitVooralWelThuis").style.display ="none";
    }
 `enter code here`};

Upvotes: 0

Views: 45

Answers (2)

sp_m
sp_m

Reputation: 2707

You can try to set timer using setTimeout().

function showFirst() {
    document.getElementById("DoeDitVooralWelThuis").style.display ="block";
    document.getElementById("remaintime").style.display ="none";
}
setTimeout(showFirst, 600000);//after 10 minutes

function showSecond() {
    document.getElementById("ExperimentArea").style.display ="block";
    document.getElementById("DoeDitVooralWelThuis").style.display ="none";
}
setTimeout(showSecond, 1200000);//after 20 minutes

Upvotes: 1

user2375017
user2375017

Reputation:

The second counter++ is not needed.
There are also syntax errors in your code such as unclosed brackets.

To make the screens change on 10 minutes and 20 minutes, you need to use
if(counter === (1000 * 60) * 10) {

1000 equals 1000 milliseconds, which is one second. So you have to multiply that by sixty to get One minute, and then by ten to get ten minutes. Same with twenty. 

window.onload = function()
{
    var counter = 0;
    var i = setInterval(function(){

    counter++;
    if(counter === (1000 * 60) * 10) {
        document.getElementById("secondScreenElement").style.display ="block";
        document.getElementById("firstScreenElement").style.display ="none";
    }

    if(counter === (2000 * 60) * 10) {
        document.getElementById("secondScreenElement").style.display ="none";
        document.getElementById("thirdScreenElement").style.display ="block";
        clearInterval(i);
    }
 });
};

If you want to stop changing between screens after the last screen has been displayed, you can use clearInterval and pass it the value of your setInterval. ie - clearInterval(i);

Working JSFiddle here. I have used 1 and two seconds in this fiddle.

Upvotes: 1

Related Questions