Question 210659 in Html Question posted in
Some basic documentation can be found here.

My html (+javascript) will not redirect to the next page. :(

I have made a counting loop via Javascript. I have made with the goal that when it reaches 100, it redirects to another page.

var number = document.getElementById("mainText").textContent;
var nnumber = parseInt(number)

function myLoop() {         
  setTimeout(function() {   
    nnumber += 1;
    document.getElementById("mainText").innerHTML = nnumber  
    nnumber++;                    
    if (nnumber < 101) {           
      myLoop();             
    }                       
  }, 200)
}
    
if(nnumber == 100){
    console.log(typeof(nnumber))
    window.location.replace("mainverification.html")
}
myLoop();

    element1 = document.getElementById("element1")
    element2 = document.getElementById("element2")
    element3 = document.getElementById("element3")
    element4 = document.getElementById("element4")
    element5 = document.getElementById("element5")
    setTimeout(function(){
        element2.style.display = "block"
        element1.style.display = "none" 
        setTimeout(function(){ 
            element2.style.display="none"
            element3.style.display="block"
            setTimeout(function(){ 
            element3.style.display="none"
            element4.style.display="block"
            setTimeout(function(){ 
                element4.style.display="none"
                element5.style.display="block"},2500)},2500)},2500)
            },1000)

I know thats a lot of code but yeah….. The if statement doesnt seem to be working for some reason. It won’t redirect. For more context, here is the HTML:

<!DOCTYPE html>
<html>
<head>
<title>Loading....</title>
<link rel="stylesheet" href="./starting.css">
</head>
<script src="https://kit.fontawesome.com/1f2023aaf1.js" crossorigin="anonymous"></script>
<body>
<i id="fa" class="fa fa-spinner fa-10x"></i>"></i><br>
<p id="mainText">0</p>
<p class="idk">%</p>
<p id="element1">Getting Data</p><br>
<p id="element2">Encrypting Data (Your Data is Private!)</p><br>
<p id="element3">Storing Data</p><br>
<p id="element4">Grabbing a Cofee</p><br>
<p id="element5">Playing Fortnite</p><br>
<script src="loading.js"></script>          
</body>
</html>

If someone can find what going wrong id benefit. Thanks.

ndvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv

Tags:

2

Answers


  1. 0

    You check this condition repeatedly, every 200ms:

    if (nnumber < 101) {           
  myLoop();             
}

    But you check this condition once, and only once, when the page first loads:

    if(nnumber == 100){
  console.log(typeof(nnumber))
  window.location.replace("mainverification.html")
}

    If you want to also check the latter condition repeatedly, every 200ms, put is in the myLoop function where the former condition is.

    Login or Signup to reply.
  2. 0 
    enter code here

var number = document.getElementById("mainText").textContent;
var nnumber = parseInt(number)

function myLoop() {         
setTimeout(function() {   
    nnumber += 1;
    document.getElementById("mainText").innerHTML = nnumber;
    nnumber++;                    
    if (nnumber < 101) {           
    myLoop();             
    } else {
    // Redirect when nnumber reaches 100
    window.location.replace("mainverification.html");
    }                       
}, 200);
}

element1 = document.getElementById("element1");
element2 = document.getElementById("element2");
element3 = document.getElementById("element3");
element4 = document.getElementById("element4");
element5 = document.getElementById("element5");

setTimeout(function(){
    element2.style.display = "block";
    element1.style.display = "none"; 
    setTimeout(function(){ 
        element2.style.display = "none";
        element3.style.display = "block";
        setTimeout(function(){ 
            element3.style.display = "none";
            element4.style.display = "block";
            setTimeout(function(){ 
                element4.style.display = "none";
                element5.style.display = "block";
            }, 2500);
        }, 2500);
    }, 2500);
}, 1000);

// Start the loop when the page loads
myLoop();
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search