CODEWITHSUNDEEP
javascripthtmlcss
Phyremaster
Phyremaster

Reputation: 87

page.onload function not running

I just started making my first website, and this is the first REAL problem that I have run into. I'm trying to make "Sign in" and "Sign up" buttons that automatically change their text if the user is logged in. To do it, I'm using Javascript to read the localStorage username value, check if it equals null, and then set both button's .innerHTML based on that. The problem? My Javascript won't run. Here's the HTML/Javascript code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Phyre-Home</title>
<link href="Phyre-Home.css" rel="stylesheet">
<script language="javascript">
page.onload function{
var profile = document.getElementById("Profile");
var signout = document.getElementById("SignUpOut");
var username = localStorage.getItem('phyreUsername');
if(username == null) {
profile.innerHTML = "Sign in";
signout.innerHTML = "Sign up";
}else{
profile.innerHTML = username;
signout.innerHTML = "Sign out";
}
}
</script>
</head>
<body>
<header>
<img src="PhyreSiteHeader.bmp" alt="Phyre">
<button id="SignUpOut"></button>
<button id="Profile"></button>
<h1 style="display:none">Fire</h1>
<script language="javascript">

</script>
</header>
<nav>
<ul>
<li><b>Home</b></li>
<li><a href="www.phyregaming.com/profile">Profile</a></li>
<li><a href="www.phyregaming.com/games">Games</a></li>
<li><a href="www.phyregaming.com/chat">Chat</a></li>
<li><a href="www.phyregaming.com/videos">Videos</a></li>
</ul>
</nav>
<aside>
<h1><b>Page Nav</b><br></h1>
<p><i>This page does not have its own, separate navigation section. Sorry.</i></p>
<h1><b>Ads</b><br></h1>

</aside>
<article>

</article>
</body>
</html>

...And here's the CSS, just in case it matters:

article, aside, figure, figcaption, footer, header, main, nav, section, summary {
display:block;
}
header:img{
max-width:90%;
}
body{
background-color:rgb(75, 75, 75);
margin:0px;
font-family:times new roman, serif;
}
header{
width:100%;
float:top;
}
#SignUpOut{
position:absolute;
top:0%;
right:0%;
}
#Profile{
position:absolute;
top:0%;
right:7.5em;
}
h1{
text-align:center;
font-family:AR BLANCA, times new roman, serif;
}
ul{
list-style-type:none;
margin:0;
padding:0;
}
li{
float:left;
width:20%;
font-size:large;
text-align:center;
border-style:solid;
border-color:rgb(187, 15, 23);
box-sizing:border-box;
background-color:rgb(237, 28, 36);
border-width:2px;
margin-bottom:0.5%;
}
aside{
float:left;
width:20%;
border-style:solid;
border-color:rgb(187, 15, 23);
box-sizing:border-box;
background-color:rgb(237, 28, 36);
border-width:3.5px;
padding:0.5%;
margin-right:0.5%;
}
article{
float:right;
width:79.5%;
border-style:solid;
border-color:rgb(187, 15, 23);
box-sizing:border-box;
background-color:rgb(237, 28, 36);
border-width:3.5px;
padding:0.5%;
}

The culprit is the first Javascript section. Please help if you can, I'm pretty new to HTML5, CSS3, and Javascript.

P.S. I don't have a domain or anything yet, so none of the links are valid.

Upvotes: 2

Views: 317

Answers (3)

Ciel
Ciel

Reputation: 4440

I have made you a completely working example here, that does everything you are asking, you may simply click this link to see it in action. You may click the second link in order to see the code and dissect it a bit.

Working Sample (with username)

Just click the link to see it work.

enter image description here

Working Sample (without username)

Just click the link to see it work.

enter image description here

Working Sample (Code)

Just click the link, then click Run with JS to see it work. enter image description here

Now that I have shown you a completely working solution, allow me to explain why it works.

  • You do not appear to be using any sort of external library, this means that there is really nothing running overhead to try and help manage when these events fire and such.
  • You did not declare any kind of id on the elements you were trying to fetch

To demonstrate this, I cite your original code;

var profile = document.getElementById("Profile");

Which was assumed to be functioning on the following <a> tag.

<li><a href="www.phyregaming.com/profile">Profile</a></li>

The problem here is that document.getElementById actually needs an id to get by. This is remedied by ammending the <a> tag with an id, like this.

<li><a id="Profile" href="www.phyregaming.com/profile">Profile</a></li>

The next part of the problem is that you needed this code to run only after the page had loaded. But because you're running just normal javascript, it will run in the order it is seen - unless wrapped inside of a function. Because page.onload is not a valid function, your javascript simply threw an error, and since page.onload is not a real function, it didn't quite understand what its own problem was, so it didn't give you any really useful information.

I fixed this by first wrapping your code in a function, like this.

<script type="text/javascript">
   function ready() {
      // your javascript code here
   }
</script>

What this meant is that when the page hit that part, it created the function, but it did not run it.

Then you needed to run the function, but only once the other parts of the page were ready. We did this using the onload attribute of the <body> tag, like this;

<body onload="ready()">

And that is really all there is to it! From there it was just a matter of assigning the id attributes where needed, and doing a little bit of housekeeping to the HTML and CSS.

I made some changes to help your sample run a bit better, most noticed is that I removed this part of your CSS

#Profile { position: absolute; top: 0%; right: 7.5em; }

I am not sure if you need it to be positioned like that, but from what it looked like, you wanted to make sure that the Profile section is also where the user finds the Login and Logout buttons. I accommodated by moving the <li> that contained those elements to the last ones in the list, this will ensure they are always rendered in the upper right part of the page, for this example.

The first one is just a sample showing how to run the code when the page is loaded. The second shows where you would put your actual code, but I do not know what your specific javascript is aiming to accomplish, so I commented it out.

Here is the complete working code.

You can remove the line localStorage.setItem("phyreUsername", "Ciel"); or comment it out, to see how the behavior changes based on whether or not a username is found.

HTML

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <script type="text/javascript">
          function ready(){
            // comment this line out to test different behaviors         
            localStorage.setItem("phyreUsername", "Ciel");  
            var username = localStorage.getItem("phyreUsername");

              var profile = document.getElementById("SignIn");
              var signout = document.getElementById("SignUpOut");

              if (username == null) {
                  profile.innerHTML = "Sign in";
                  signout.innerHTML = "Sign up"; 
              } else {
                  profile.innerHTML = username;
                  signout.innerHTML = "Sign out";
              }
          }
       </script>
</head>

<body onload="ready()">
    <nav>
        <ul>
            <li><b>Home</b></li>
            <li><a href="www.phyregaming.com/games">Games</a></li>
            <li><a href="www.phyregaming.com/chat">Chat</a></li>
            <li><a href="www.phyregaming.com/videos">Videos</a></li>
            <li>
              <a href="www.phyregaming.com/profile" id="SignIn">Sign In</a>
              <a href="www.phyregaming.com/signout" id="SignUpOut">Sign Up</a>
           </li>
        </ul>
    </nav>
    <aside>
        <h1>
          <b>Page Nav</b>
        </h1>
        <p style="font-style: italic">This page does not have its own, separate navigation section. Sorry.</p>
        <h1>Ads</h1>
    </aside>
</body>
</html>

CSS

article, aside, figure, figcaption, footer, header, main, nav, section, summary {
    display:block;
}
body {
  margin: 0;
}
nav {
  width: 100%;
  margin: 0;
  padding: 0;

}
ul {
    list-style-type:none;
    margin:0;
    padding:0;
}
li {
  float: left;
  width: 20%;
  font-size: large;
  text-align: center;
  border: solid rgb(187,15,23) 2px;
  margin-bottom: 0.5%;
  box-sizing: border-box;
  background: rgb(255, 0, 0);
}
body {
    background-color:rgb(75, 75, 75);
    margin:0px;
    font-family:times new roman, serif;
}
header {
    width:100%;
    float:top;
}
h1 {
  font-weight: bold;
}

aside {
  float:left;
    width:20%;
    border-style:solid;
    border-color:rgb(187, 15, 23);
    box-sizing:border-box;
    background-color:rgb(237, 28, 36);
    border-width:3.5px;
    padding:0.5%;
    margin-right:0.5%;
}

article {
    float:right;
    width:79.5%;
    border-style:solid;
    border-color:rgb(187, 15, 23);
    box-sizing:border-box;
    background-color:rgb(237, 28, 36);
    border-width:3.5px;
    padding:0.5%;
}

I hope that this gives you enough information to really start making some headway. If you have further questions, please ask.

Upvotes: 0

Ashley Medway
Ashley Medway

Reputation: 7301

The main issue is that page is not a JavaScript variable.

You could do something like

function myLoadFunction() {
    ...
}

then 

<body onload="myLoadFunction()">
...
</body>

Alternatively you can use window.onload 

window.onload = function () {
    ...
};

Upvotes: 0

adeneo
adeneo

Reputation: 318232

As far as I know, there's no such thing as page, you probably want window

window.onload = function() {...

or just drop the onload handler and move the script to the bottom, right before </body>

Upvotes: 3

Related Questions