title: Having a couple of issues with session storage and if statement to store name in a separate file
body: <p>I am having trouble with displaying stored name using "Session Storage" in an separate html file. I want it to be executed when I click "enter" button so that "name" section changes into a name that users typed. To further explain what should be happening.</p>
  
  <ol>
  <li><p>When the users type nothing = "", it should prevent the user from moving forward and the "What is your name" part changed into "Please enter your name".</p></li>
  <li><p>When the users type a word or their names, the stored name is to be displayed in  inside home.html page.</p></li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// login.js section
  
  var username = document.getElementById("user_name");
  var enter = document.getElementById("enter");
  var firstname = document.getElementById("name");
  var message = document.getElementById("message");
  
  function login(){
      if (username.value == "") {
       message.innerHTML = "Please enter your name.";
      } else {
          enter.addEventListener("click",function(){
              window.location.href = "home.html";
              sessionStorage.setItem('name',username.value);
              firstname.innerText = sessionStorage.getItem('name');
              console.log(name);
          });
      }   
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>          &lt;!-- This is located in login.html --&gt;
            &lt;div id="question" class="question_ani"&gt;
                  &lt;h1 id="message"&gt;What is your name?&lt;/h1&gt;
              &lt;/div&gt;
  
              &lt;input type="text" id="user_name" maxlength="10" class="input_ani"&gt;
  
           &lt;button id="enter" class="animate-bottom" type="button" onclick="login()"&gt;enter&lt;/button&gt;
           
            &lt;hr&gt;
            &lt;!-- This is located in home.html --&gt;
            &lt;div class="speech" id="speech"&gt;Hi, &lt;span id="name"&gt;name&lt;/span&gt;&lt;br /&gt;Weclome to Recyclone.&lt;br /&gt;I am here to teach you how to recycle in a fun way. &lt;br /&gt;Let's learn how to recycle!&lt;/div&gt;
            
           &lt;!-- both are linked to &lt;script src=js/login.js&gt;&lt;/script&gt; --&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong><em>Problems I am having.</em></strong></p>
  
  <ol>
  <li><p>The session storage is working as well as message changing part, but for some reason, users have to click the "enter" button <strong>twice</strong> to move forward.</p></li>
  <li><p>Like aforementioned, the stored name should be displayed in the  section but it is not displaying it for some reason.* </p></li>
  </ol>
  
  <p>I am always grateful for constant community help and thank you in advance to those who take time to read it through. Here is my github link for this project for details. <a href="https://github.com/monuda85/recyclone" rel="nofollow noreferrer">https://github.com/monuda85/recyclone</a></p>