Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript Transfer of control problem

W

WTB32141

Coder
Suppose 5 html files (A, B, C, D, and E) comprise a website. File A is the index.html file. File C contains a Javascript section (i.e., <script> ... </script>). While I’m within the Javascript section, I want to transfer control to html file D. I tried to do it with (window.location = 'File D.html'). That trial failed, for it transferred control to File A—not to file D. Is there any way to get the result that I want, which is to transfer control from within the Javascript section to an html file that is not the site’s index.html file? If a way exists, then please describe it to me. To follow is the code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enter Passcode</title>
<link rel="stylesheet" href="Styling.css">
<script src="script.js"></script>
</head>

<body>
<!--For the screen's top line. Create a 3-cell container. In cell 1, put a link to my home page. In cell 2, put the page's title. Leave cell 3 empty. -->

<div id="textbox">
<div class="left-cell">&emsp;</div>
<div class="middle-cell">Enter Passcode</div>
<div class="right-cell">&emsp;</div>
</div>
<br /><br /><br />

<script>

let i=0, PC='' // Initialize variable i (the counter) and PC, which holds the passcode entered.

do { // Begin a Do ... While i<3 loop.

PC = prompt("Please enter your passcode exactly as I gave it to you.","");

// Test PC to see what the LA did The prompt box has 2 buttons to hit: Cancel & OK. Cancel returns null. OK returns whatever
// he entered in the prompt box.

if (PC == null)

(window.location = 'index.html') // He hit "Cancel"; so return to home page.

// He hit "OK"; so he entered a passcode. Did he enter the right one?

else if (PC == "Zeta")

(window.location = 'Choose_Book.html') // Correct passcode entered; so launch the choose-book code.

else

i = i + 1 // A bad passcode was entered; so increment i

}

while (i<3)

//Control arrives here only if i=3 (3 consecutive bad passcodes entered).

alert("3 bad passcodes were entered. Hit the OK button to return to the home page.");
window.location = 'index.html'

</script>

</body>
</html>
 
Sort by date Sort by votes
Hey @WTB32141

So overall, you've done some outstanding work on this project and have a lot of solid things going for it; I think your most considerable confusion is coming in when you think of how the code works. Logically as humans, we think, "okay, if the page changes, the JS code will stop running" of course, this is not the case. When Javascript code runs, unless we tell it specifically to stop, it will only stop when it reaches the end of your code block; take a look at this image below.

Screenshot_2304.png

In this example above, when you open the Choose_Book.html, it does actually go to this page for a split second, but then when the loop ends (I manually placed the break there for testing reasons), it will immediately drop down to the final line where it will always open index.html

As you can see, this becomes an issue when we attempt to work with all of the other sections/settings. I highly recommend you take the above advice and work with that before opening the spoiler below and showing you how to solve this. (The spoiler will also have its own tips and things you can improve on within your code.

JavaScript: 
    let i = 0, PC = '' // Initialize variable i (the counter) and PC, which holds the passcode entered.

    /*
    Converting the do while to a normal infinite loop. The reason we have gone with this is just for simplicity. We will
    check when to stop the loop from within our conditional checks
     */
    while (true) {
        PC = prompt("Please enter your passcode exactly as I gave it to you.", "");

        /*
        You'll notice that I am using {} around your conditional checks. The reason is that we now have the addition
        of our break statements, we can no longer place this on one line.

        The reason we're making use of the break statements is that as soon as one of the conditions is met, we want
        to break the loop.
         */
        if (PC == null) {
            (window.location = 'index.html')
            break
        } else if (PC === "Zeta") {
            (window.location = 'Choose_Book.html')
            break
        }
        /*
        This here is the biggest change; we've now placed our check to see if the password has been entered at least three times incorrectly.  If we do we tell them the password was wrong and return them to the homepage.
         */
        else if (i === 3) {
            alert("3 bad passcodes were entered. Hit the OK button to return to the home page.");
            window.location = 'index.html'
            break
        }

        /*
        Because of all of the break statements we can just place this on the last line of the script section as it will
        only run if none of the break statements run.
         */
        i = i + 1 // A bad passcode was entered; so increment i
    }

Some additional tips

  • I highly recommend taking a look at functions; they can make your JS code a lot easier to work with compared to just placing it loosely in the script tags.
  • When doing checks in JS it's highly recommended to avoid using the == but rather ===, the === checks for both the value and datatype of an element, for example 1 == '1' //this is true but 1 === '1' //This is false. the reason the third one is false is because one is an int while the other is a string, so this avoids us having silly little bugs appearing
I hope this helped!
 
Upvote 0 Downvote
logan2971 said:
Hey @WTB32141

So overall, you've done some outstanding work on this project and have a lot of solid things going for it; I think your most considerable confusion is coming in when you think of how the code works. Logically as humans, we think, "okay, if the page changes, the JS code will stop running" of course, this is not the case. When Javascript code runs, unless we tell it specifically to stop, it will only stop when it reaches the end of your code block; take a look at this image below.

View attachment 1899

In this example above, when you open the Choose_Book.html, it does actually go to this page for a split second, but then when the loop ends (I manually placed the break there for testing reasons), it will immediately drop down to the final line where it will always open index.html

As you can see, this becomes an issue when we attempt to work with all of the other sections/settings. I highly recommend you take the above advice and work with that before opening the spoiler below and showing you how to solve this. (The spoiler will also have its own tips and things you can improve on within your code.

JavaScript: 
    let i = 0, PC = '' // Initialize variable i (the counter) and PC, which holds the passcode entered.

    /*
    Converting the do while to a normal infinite loop. The reason we have gone with this is just for simplicity. We will
    check when to stop the loop from within our conditional checks
     */
    while (true) {
        PC = prompt("Please enter your passcode exactly as I gave it to you.", "");

        /*
        You'll notice that I am using {} around your conditional checks. The reason is that we now have the addition
        of our break statements, we can no longer place this on one line.

        The reason we're making use of the break statements is that as soon as one of the conditions is met, we want
        to break the loop.
         */
        if (PC == null) {
            (window.location = 'index.html')
            break
        } else if (PC === "Zeta") {
            (window.location = 'Choose_Book.html')
            break
        }
        /*
        This here is the biggest change; we've now placed our check to see if the password has been entered at least three times incorrectly.  If we do we tell them the password was wrong and return them to the homepage.
         */
        else if (i === 3) {
            alert("3 bad passcodes were entered. Hit the OK button to return to the home page.");
            window.location = 'index.html'
            break
        }

        /*
        Because of all of the break statements we can just place this on the last line of the script section as it will
        only run if none of the break statements run.
         */
        i = i + 1 // A bad passcode was entered; so increment i
    }

Some additional tips

  • I highly recommend taking a look at functions; they can make your JS code a lot easier to work with compared to just placing it loosely in the script tags.
  • When doing checks in JS it's highly recommended to avoid using the == but rather ===, the === checks for both the value and datatype of an element, for example 1 == '1' //this is true but 1 === '1' //This is false. the reason the third one is false is because one is an int while the other is a string, so this avoids us having silly little bugs appearing
I hope this helped!
Click to expand...
It helped a WHOLE LOT!! Thank you very much. Thanks to you, I learned much about loops. I could have spent the rest of my life trying to find the problem. You spotted it quickly, and I like your solution. I also will take your advice re the use of functions and "===" vs "==". I wish you a merry Christmas and a healthy and prosperous 2023.
 
Upvote 0 Downvote
WTB32141 said:
It helped a WHOLE LOT!! Thank you very much. Thanks to you, I learned much about loops. I could have spent the rest of my life trying to find the problem. You spotted it quickly, and I like your solution. I also will take your advice re the use of functions and "===" vs "==". I wish you a merry Christmas and a healthy and prosperous 2023.
Click to expand...
Glad I could help! Don't forget to mark the thread as solved when you get the time ;)
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

DataCamp Advertisement
Code Academy Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom