CODEWITHSUNDEEP
javascripthtml
user4696819
user4696819

Reputation: 7

HTML and Javascript code issue

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

Upvotes: -1

Views: 69

Answers (1)

JoJo
JoJo

Reputation: 806

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"

Upvotes: 1

Related Questions