JS input value assigning to variable - undefined

Question

I'm really fresh to JS Need some help because I don't understand a thing. If I try to assign the whole line to variable, I can use this variable later, but the outcome of that is blank or undefined, when I'm trying to log this to console, or either alert that using opera/chrome it's still the same, am I doing something wrong?

HTML

<input type="text" id="name" placeholder="username">

JS

not working

var name = document.getElementById('name').value;

console.log(name);

can't do that either

var name = document.getElementById('name');

console.log(name.value);

innerHTML not working

I can do only that

console.log(document.getElementById('name').value);

UPDATING THE CODE TO FULL EXAMPLE So I've changed the variable name to nameInp but it isn't working

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <input type="text" id="name" placeholder="podaj imię">
    <input type="text" id="name2">
    <input type="text" id="name3">
    <!--
    <input type="password" id="password" placeholder="podaj hasło">
    <input type="password" id="confPassword" placeholder="powtórz hasło">
    -->
    <button id="submit" onclick="check();" value="wyślij">wyślij</button>

    <!--
    <p id="para"></p>
    -->   

    <div class="center"></div>
    <div class="center2"></div>


    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="main.js"></script>
</body>
</html>


var nameInp = document.getElementById('name').value;
var btn = document.getElementById('submit');


function check(){
    console.log(nameInp);
}

Your code seems to be correct. When gets the JavaScript executed? It seems like it gets executed before the DOM has finished with loading. So you try to retrieve your element before it's even there. — CodeF0x, Jun 01 '18 at 11:45
`name` is a bad name for an identifier, rename the element. Most likely you'll get blank from `value` because there's no value at the time your code is running, `innerHTML` is not a property of `input` element, hence that returns you `undefined`. — Teemu, Jun 01 '18 at 11:46
@Teemu i know that innerHTML works only after period, dot and it can take value as blank — wilk85, Jun 01 '18 at 12:05
See https://stackoverflow.com/q/3434278/1848654 for why using the the same name for the HTML `id` attribute and a global JavaScript variable is a bad idea. — melpomene, Jun 01 '18 at 12:21
@wilk85 Nope, `input` is an empty element, and it can't have HTML. If you set its `innerHTML`, it is just a custom attribute to the said element, and has no reflection to attributes of an input or layout of a page. — Teemu, Jun 01 '18 at 13:29
@Teemu thank You, my mistake, i should use then document.write — wilk85, Jun 01 '18 at 14:00

score 1 · Accepted Answer · answered Jun 01 '18 at 12:08

Here's your code reduced to the relevant parts:

var nameInp = document.getElementById('name').value;

function check() {
    console.log(nameInp);
}

<input type="text" id="name" placeholder="podaj imię">

<button id="submit" onclick="check();" value="wyślij">wyślij</button>

The problem is that var nameInp = document.getElementById('name').value; is executed right when main.js is loaded (which happens as part of the whole page loading). At that point the input field has no value yet, so this is equivalent to var nameInp = "";.

Later, when the user clicks on the submit button, the check function runs, but nothing has changed the nameInp variable. It still contains "", so you get no output.

Here's a clearer demonstration of the problem, where the initial value is not "" but "initial value":

var nameInp = document.getElementById('name').value;

function check() {
    console.log(nameInp);
}

<input type="text" id="name" placeholder="podaj imię" value="initial value">

<button id="submit" onclick="check();" value="wyślij">wyślij</button>

Every time you click on wyślij, initial value is printed because that's what nameInp was initially set to.

Fix:

var nameInp = document.getElementById('name');

function check() {
    console.log(nameInp.value);
}

<input type="text" id="name" placeholder="podaj imię">

<button id="submit" onclick="check();" value="wyślij">wyślij</button>

Here we only retrieve the .value of the input field at the time check() is run, i.e. when the button is clicked.

Thank You, that finally worked good, all time i was doing console.log(name).value; so i guess i'm still fresh :) I gave +1 and the correct answer :) thank You — wilk85, Jun 01 '18 at 12:14

score 0 · Answer 2 · answered Jun 01 '18 at 12:04

You can't see anything in the console because you're outputting the value of the input when the script is called so essentially on page load. At this point the input box hasn't been filled yet. That's the console.log doesn't show anything.

You can, for example, run your function every time the user types inside the input box. For this you will need an event listener:

Select the element you desire to 'watch' and call the addEventListener() method on it. It takes the event type and a callback function as parameters.

Lastly, in the callback function, we get the value of the input box by accessing the target of the event: e.target. e being the event object and e.target the property target of the event.

The code below will call a console.log() every time the user types in the input box:

document.querySelector('#username').addEventListener('keydown', function (e) {
    console.log(e.target.value);    
});

<input type="text" id="username" placeholder="username">

that is a nice example thank You, but i just wanted to be simple, without eventListener — wilk85, Jun 01 '18 at 12:18

score -1 · Answer 3 · answered Jun 01 '18 at 11:55

I have made a script for all three cases, use it according to your need.

<html>

<head>
    <script>
        function Consolify() {
            var firstMethod = document.getElementById('name').value;
            console.log('firstMethod = ', firstMethod);
            var secondMethod = document.getElementById('name');
            console.log('secondMethod = ', secondMethod.value);
            console.log('thirdMethod = ', document.getElementById('name').value);
        }
    </script>
</head>

<body>
    <input type="text" id="name" placeholder="username">
    <button onclick="Consolify()">Consolify</button>
</body>

</html>

Run this code in a browser and look for console, it is well tested — Prabhu Tiwari, Jun 01 '18 at 12:11

JS input value assigning to variable - undefined

3 Answers3