In my HTML document, when I tried to log out the input value, it is undefined. Why?

Question

I've been trying to make a simple form validation js project, and my first logic statement itself had an error. When I tried to log out the value of my input it says that it is undefined:

<!--skipped css-->
<html>
  <head>
   <title>
    Form validation
   </title>
  </head>
  <body>
   <div class="transparent">
        <div class="form">
            <h1 class="login"> Login </h1>
            <form>
                <label for="name" class="LName">Name</label> 
                <input class="name" id="name" name="name" placeholder="Enter your username"><br>
                <label for="email" class="LEmail">E-mail</label> 
                <input class="email" id="email" name="email" placeholder="Enter your E-mail">   <br>
                <label for="password" class="LPassword">Password</label> 
                <input type="password" class="password" id="password" name="password" placeholder="Enter your password"><br>
            </form> <br>
            <button class="btn"> Login </button>
            <br> <br>
            <span> OR </span><br> <hr>
            <button class="gbtn"> <i class="fab fa-google"></i> Sign in with Google </button>
        </div>
    </div>
    <script>
        var name = document.getElementById('name');
        var email = document.querySelector('.email');
        var password = document.querySelector('.password');
        var btn = document.getElementsByClassName('btn')[0];

        btn.onclick = empty;

        function empty() {
            name = document.getElementById('name');
            console.log(name.value);
            if(name.value == "") {
                name.classList.add('errInp');
            }
    }
    </script>
  </body>
</html>

I believe I've assigned all the vars, and I've tried changing it to innerText too, only to get another undefined. Can someone help me out?

see sharper · Accepted Answer · 2021-07-23T05:37:12.463

I believe your choice of 'name' as the variable name is the problem! By assigning a variable using var name in global scope, you are clashing with window.name. Normally you set the window's name using window.name='some name' (a string). In your case where you try to assign an HTML element to it, JS calls .toString() under the hood, so the window name is actually "[object HTMLInputElement]", which has no value property.

You can solve it by changing the variable name to something else, or getting rid of the first var name = altogether and inside empty using const name = document.getElementById('name'); instead of name =....

score 0 · Answer 2 · answered Jul 23 '21 at 05:45

In addition to see sharper's explanation, since the introduction of ES6, there are only few cases where declaring variables with var is a good choice. A rule of thumb is to declare a variable as const (a constant reference to a value, but not immutable) at first and change it to let later on if you need to reassign its value. Refer to this answer for a more detailed explanation.

const validateForm = () => {
  const name = document.querySelector('#name').value
  const password = document.querySelector('#pwd').value
  if (!name || !password){
    alert('invalid input')
  }
  else{
    alert(`form is submitted for name ${name} with the password ${password}`)
  }
}

Name: <input type="text" id="name">
Password: <input type="password" id="pwd">
<button onClick="validateForm()">Login</button>

`||` is the logical or operator in JavaScript, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators . In this case it just verifies if one of the values (name OR password) are falsy (e.g. undefined). — tgikf, Jul 23 '21 at 05:58

In my HTML document, when I tried to log out the input value, it is undefined. Why?

2 Answers2