Using Javascript, create a loop that navigates between two different pages and add a timer on one of them

Question

Using Javascript, create a loop that navigates between two different pages and add a timer on one of them

How can I create a while loop that spans across 2 HTML pages or use a prompt to ask a question? If the wrong answer is provided, I would like to be redirected to another HTML page which will display for 5 seconds before returning to the prompt.

This is my current attempt at coding:

<!DOCTYPE html>
<html>
<body>
    <script>
        var pass;
            pass = prompt("The corret answer is 1");
        if (pass == "1") {
            document.location.href = "https://stackoverflow.com/questions/40539097/redirect-user-to-another-html-page-if-the-condition-is-true";
        } else {
            setTimeout(function(){
              window.location.href = 'prova2.html';
         }, 5000);
        }
</script>
    <body>
</html>

The issue I'm facing is that the "prova2.html" page only appears after 5 seconds. How can I make it visible for the entire duration?

javascript html css

Answer 1

Answer №1

However, your code operates in a way where if the prompt result is '1' it redirects to SO, otherwise it initiates a timer that redirects to prova2 after 5 seconds.

If you desire the specific behavior you are discussing, the solution is to redirect to prova2.html right away and in the code for prova2.html, establish a timeout function to redirect you back after 5 seconds:

In your original.html file (or whatever name it has for you):

<!DOCTYPE html>
<html>
  <body>
    <script>
      var input = prompt("Please enter the correct answer: ");
      if (input == "1") {
        document.location.href = "https://stackoverflow.com/questions/40539097/redirect-user-to-another-html-page-if-the-condition-is-true";
      } else {
        document.location.href = 'prova2.html';
      }
    </script>
  <body>
</html>

In your prova2.html file:

<!DOCTYPE html>
<html>
  <body>
    <script>
      setTimeout(() => {
        document.location.href = 'original.html';
      }, 5000)
    </script>
  <body>
</html>

Answer 2

However, your code operates in a way where if the prompt result is '1' it redirects to SO, otherwise it initiates a timer that redirects to prova2 after 5 seconds.

If you desire the specific behavior you are discussing, the solution is to redirect to prova2.html right away and in the code for prova2.html, establish a timeout function to redirect you back after 5 seconds:

In your original.html file (or whatever name it has for you):

<!DOCTYPE html>
<html>
  <body>
    <script>
      var input = prompt("Please enter the correct answer: ");
      if (input == "1") {
        document.location.href = "https://stackoverflow.com/questions/40539097/redirect-user-to-another-html-page-if-the-condition-is-true";
      } else {
        document.location.href = 'prova2.html';
      }
    </script>
  <body>
</html>

In your prova2.html file:

<!DOCTYPE html>
<html>
  <body>
    <script>
      setTimeout(() => {
        document.location.href = 'original.html';
      }, 5000)
    </script>
  <body>
</html>

Answer 3

Answer №2

This demonstration in prova2.html demonstrates a unique way of navigating using the session history of the browser:

<!DOCTYPE html>
<html>
<body>
    <script>
      document.addEventListener("DOMContentLoaded", function(event) {
        setTimeout(function(){
            history.back();
            //window.location.href = 'previous.html';
          }, 5000);
        });
    </script>
      <p>After 5 seconds of page load, you will be redirected back.</p>
    <body>
</html>

Source: https://developer.mozilla.org/en-US/docs/Web/API/History/back

Answer 4

This demonstration in prova2.html demonstrates a unique way of navigating using the session history of the browser:

<!DOCTYPE html>
<html>
<body>
    <script>
      document.addEventListener("DOMContentLoaded", function(event) {
        setTimeout(function(){
            history.back();
            //window.location.href = 'previous.html';
          }, 5000);
        });
    </script>
      <p>After 5 seconds of page load, you will be redirected back.</p>
    <body>
</html>

Source: https://developer.mozilla.org/en-US/docs/Web/API/History/back

Using Javascript, create a loop that navigates between two different pages and add a timer on one of them

Answer №1

Answer №2

Similar questions

A guide on how to navigate the parent window from a child window

"Utilize the most recent version of Uploadify to easily upload your

React-navigation installation in React Native project failed due to ENOENT error - file or directory does not exist

Enhance your website with various map types using Google Maps JavaScript API v3

What is the reason behind having to include index 1 in the childNodes array when trying to access the initial child element?

Execute an AJAX call to remove a comment

Bypassing angular's dependency injection by utilizing a universal object

Creating a Website Optimized for Mobile Devices

Get data from ajax request in controller

Ensure that the table tag in testWeb(jspackage.JSAssignmentDiscount) contains exactly 3 rows and assess whether it complies with the CSS criteria for tables and table rows

Why isn't the Angular Google Maps Displaying in my Template View?

When the clearOnBlur setting is set to false, Material UI Autocomplete will not

Tips on efficiently inserting numbers into the names of copied input elements

CSS radio button not showing up on Safari browser

Manually adjust rotation in Three.js by clicking

Experience the power of Kendo UI Date Picker combined with AngularJS. When the datepicker is initialized, it starts

Ways to customize the datetime-local format in an HTML input field

Issues with jqGrid's grid grouping feature not functioning as expected

Utilize the map function on an array object to present data in a table using React framework

transforming blog into a data URL