HTML and Javascript code issue

Question

I have created two HTML pages, one is called username.html and the other -- resume.html.

What I want to do is, that no matter which page I open, I'll be always redirected to login page. If I open the username.html, it will be opened up and I fill in the username and password fields, then the resume.html opens.

Here is my code of login page:

<html>
    <head> 
        <title>Login page</title>
    </head>
    <body>
        <h1 style="font-family:Comic Sans Ms;text-align:center;font-size:50pt;color:#ff00ba;">
            You need to login :)
        </h1>     

        <div style="text-align:center;">
            <form style="font-family:Comic Sans Ms;">
                Username<br>
                <input type="text" name="userid"/><br>
                Password<br>
                <input type="password" name="pswrd"/>
                <br><br>
                <input style="font-family:Comic Sans Ms;" type="button" onclick="check(form)" value="Login"/>
                <input style="font-family:Comic Sans Ms;" type="reset" value="Cancel"/>
                <input style="font-family:Comic Sans Ms;" type="button" value="Log out" onclick="localStorage.removeItem('isLoggedIn');location.href='/username.html'"/>
            </form>
        </div>

        <script language="javascript">
            function check(form){
                if(form.userid.value == "pwan9047" && form.pswrd.value == "Wang1984"){
                    localStorage.setItem('isLoggedIn',true);location.href='/resume.html';
                }else{
                    alert("Error Password or Username")
                }
            }
        </script>
    </body>
</html>

I also added the following JS code to the resume.html to let it direct to username.html when the resume.html is opened:

<script>
    window.onload=function(){
        if(localStorage.getItem('isLoggedIn')==null){
            location.href="/username.html";
        }
    }
</script>

It works fine with my html editor (I am using Brackets as the editor), however, when I just click on the html files on my folder, there is a problem with it, the login page does not direct to resume page after I correctly fill the username and password, it shows page not found, the url is "file:///C:/resume.html", also when I click logout button, it has the same thing that page not found, the url is "file:///C:/username.html".

Thanks

Hi jojo, my folder has resume.html. username.html and resume.css, I put the folder in my desktop — user4696819
– user4696819, Commented Mar 21, 2015 at 9:37
@user4696819 — That's the problem then. Your URLs don't point to a folder on your desktop. They point to the local root. — Quentin
– Quentin, Commented Mar 21, 2015 at 9:39
exactly Quentin, when I use the editor to open the pages, the url showed my localhost address whereas when I opened the html file directly, it showed the C drive's location of the file, this is the difference I found and may be also the issue, so how can I make the change then?? — user4696819
– user4696819, Commented Mar 21, 2015 at 9:43

JoJo · Accepted Answer · 2015-03-21 10:24:03Z

1

The mistake is here:

location.href="/username.html";

You started the href with a forward slash ( / ) This means that the url is relative to the website root. In brackets, your site runs in a localhost server, like http://localhost:xxxxx. This root url is indeed the folder with your website, but when you open it via your normal filesystem (file:///), the root is your C drive (file:///C:/) Your file isn't directly in the c drive? Or is it? If you plan to publish your site to a webserver, you shouldn't worry, because this works the same as in brackets, and you will just go to your site root (like /public_html/)

If you really want to fix this just for opening it via the normal filesystem, you should use a relative href to the file, not a relative one to the root. Just remove that forward slash to do this.

location.href="username.html";

Now, you start navigating from the folder where the current file is, so if you want to navigate from website/index.html to website/subfolder/file2.html, you can just do this using

href="subfolder/file2.html

Note that navigating from website/subfolder/file2.html to website/index.html won't work anymore, because there is no folder called 'website' inside 'subfolder' You will need to navigate down, like this:

href="../file2.html"

../ only navigates down one folder, so if you want to navigate down two folders (for example from a subfolder inside a subfolder to something in the root) you can use two of them

href="../../file2.html"

edited Mar 21, 2015 at 10:24

answered Mar 21, 2015 at 9:44

JoJo

8161 gold badge14 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user4696819 Over a year ago

Hi jojo, one more thing to mention, when I remove the slash in front of the file, it is still working with Brackets, which is opened via website root in localhost, I thought it can be only accessed via root by having the slash

JoJo Over a year ago

No slash means start in the same folder as current file, so if both files are in the site root, yes. Note that if you are navigating from a subfolder to the root, you can go down one folder by using '../file.html' @user4696819

user4696819 Over a year ago

I see, so I want to still use slash in front of the file, can I just move to my html files to C drive without any subfolder? such as C:/resume.html and C:/username.html

JoJo Over a year ago

Read my edit, it might help you out @user4696819. Moving files directly to the c drive won't be a great idea in my opinion...

Collectives™ on Stack Overflow

HTML and Javascript code issue

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related