Variable is undefined javascript

Question

Hello I made a "login screen" that when you enter a name you will be transfer to another html file. I made a welcome back screen that says Welcome back, "username". But for some reason the variable that I use to take the value of the username field is undefined. This is the login screen html code:

<form id="login-form" metod="post" action="main.html">
      <div class="txt_field">
          <input id="username" type="text" required>

          <label>username</label>
      </div>
      <input onclick="validate()" type="submit" id="submit" value="Login">
  </form>
</div>
<script type="text/javascript" src="functions.js"></script>

-> this is the js file:

let username1;
function validate(){
   username1=document.getElementById(username).value;
}
document.getElementById('show_username').innerHTML = username1;

-this is the after login html file

<center>
    <h1>Welcome back,<br>
      <span id="show_username"></span>
  </h1>
  </center>
  <script type="text/javascript" src="functions.js"></script>

**ofc I didn't include all the code for basic reasons.

If I understand, once you submit the login form you are loading a new page. The JavaScript variables are reset as a new page is loaded. Normally the username should be given by the server since it is stored in the session (typically in PHP or the server-side technology). I would avoid doing that with JavaScript since it's not made for that. But you could store the username inside a cookie and read it later with some JavaScript. But as I said before, print the username on the server side when you are building the HTML page. — Patrick Janser
– Patrick Janser, Commented Jun 25, 2021 at 14:05

Luke LaValva · Accepted Answer · 2021-06-25 13:59:01Z

2

Here is what happens in JavaScript when you load your page:

// username1  is set to null
let username1;
// validate() function is created
function validate(){
   username1=document.getElementById(username).value;
}
// show_username element is populated with username1 (still null)
document.getElementById('show_username').innerHTML = username1;

When you call the validate function, username1 is updated but document.getElementById('show_username') is not.

You also are referencing a username variable instead of 'username' as a string.

Your code will work if you move line 5 into the validate function, and fix that issue.

let username1;
function validate(){
   username1=document.getElementById('username').value;
   document.getElementById('show_username').innerHTML = username1;
}

answered Jun 25, 2021 at 13:59

Luke LaValva

3341 gold badge3 silver badges14 bronze badges

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

3 Comments

NcXNaV Over a year ago

Do we also need to Initialize "let username1;" inside validate() function as well?

nitrin0 Over a year ago

Maybe it's just me misunderstanding but he seems to have two different html files (login form and "logged" form). This, ofc, won't work despite fixing logic. Some sort of persistence is necessary (cookies, localStorage, whatever).

user13782089 Over a year ago

I made the changes as you said, but now there is not even displaying undefined.

Collectives™ on Stack Overflow

Variable is undefined javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related