Value of form input is blank in JavaScript

Question

When I try to retrieve text that was entered in a form, the result is blank.

document.getElementById("pass").addEventListener("keydown", function() {
  document.getElementById("pass").style.backgroundColor = "#DFFEFE";
});
document.getElementById("pinCode").addEventListener("keydown", function() {
  document.getElementById("pinCode").style.backgroundColor = "#DFFEFE";
});
var pass = document.getElementById("pass").value;
var pinCode = document.getElementById("pinCode").value;

function createCookie() {
  window.alert(pass);
}

<div id="validation">
  <form id="validationForm">
    <fieldset>
      <label for="pass">Password:</label><br />
      <input type="text" id="pass" name="pass" /><br />
      <label for="pinCode">4-digit PIN:</label><br />
      <input type="text" id="pinCode" name="pinCode" /><br />
      <input type="submit" value="Log In" onclick="createCookie()" />
      <p id="rightorwrong"></p>
    </fieldset>
  </form>
</div>
<script type="text/javascript" src="password.js"></script>

When the user enters data in the form and presses submit, the function createCookie() is called. I know this works because if I put in window.alert("test"); in the function, it works. Therefore the problem is in the pass.

I tried removing the value from var pass = document.getElementById("pass").value;, but that didn't work either.

For clarification, this is what shows up when I press submit on the form:

I'm stumped, because this is also relatively simple code. (I am on Chrome 84.)

TIA

`var pass = document.getElementById("pass").value;` this sets pass when the page initially loads, so it will be empty, you'll need to update `pass` in your keydown event listener, or retrieve the value inside of `createCookie` — Nick Parsons, Aug 24 '20 at 13:27
Does this answer your question? [Global variable not changing on event](https://stackoverflow.com/questions/19120122/global-variable-not-changing-on-event) — Heretic Monkey, Aug 24 '20 at 13:33
@HereticMonkey No, since it's using JQuery. I would want a strictly JS solution. — Sirswagger21, Aug 24 '20 at 13:34

score 1 · Accepted Answer · answered Aug 24 '20 at 13:27

You must use value inside the function like that:

document.getElementById("pass").addEventListener("keydown", function() {
    document.getElementById("pass").style.backgroundColor = "#DFFEFE";
});
document.getElementById("pinCode").addEventListener("keydown", function() {
    document.getElementById("pinCode").style.backgroundColor = "#DFFEFE";
});


function createCookie() {
   var pass = document.getElementById("pass").value;
   var pinCode = document.getElementById("pinCode").value;
    window.alert(pass); 
      window.alert(pinCode); 
}

<div id = "validation">
    <form id = "validationForm">
        <fieldset>
            <label for = "pass">Password:</label><br  />
            <input type = "text" id = "pass" name = "pass"  /><br  />
            <label for = "pinCode">4-digit PIN:</label><br  />
            <input type = "text" id = "pinCode" name = "pinCode"  /><br  />
            <input type = "submit" value="Log In" onclick = "createCookie()"  />
            <p id = "rightorwrong"></p>
        </fieldset>
    </form>
</div>
<script type = "text/javascript" src = "password.js"></script>

Yes, it works. However, why? Aren't variables that are defined outside of functions usable inside functions too? Or am I wrong? — Sirswagger21, Aug 24 '20 at 13:29
because outside the function catch value on load page, in the function only when you press button. — Simone Rossaini, Aug 24 '20 at 13:30
Oh, ok that makes sense Thank you. Will accept answer when allowed. — Sirswagger21, Aug 24 '20 at 13:30

score 0 · Answer 2 · answered Aug 24 '20 at 13:29

0

You should get value when you submit, not when js file is loaded. Also you could listen with onchange function

var pass;
function createCookie() {
  pass = document.getElementById("pass").value;
  window.alert(pass); 
}

answered Aug 24 '20 at 13:29

crgavrila

3
4

score 0 · Answer 3 · answered Aug 24 '20 at 13:34

the javascript code should be like this

document.getElementById("pass").addEventListener("keydown", function () {
    document.getElementById("pass").style.backgroundColor = "#DFFEFE";

});
document.getElementById("pinCode").addEventListener("keydown", function () {
    document.getElementById("pinCode").style.backgroundColor = "#DFFEFE";
});


function createCookie() {
    var pass = document.getElementById("pass").value;
    var pinCode = document.getElementById("pinCode").value;
    alert(pass)
}

Ajeet Eppakayala · Answer 4 · 2020-08-24T13:43:09.730

Put your variable inside the function. As initially when page loads, their values will be null and you are not reassigning values to them.

So, either change their values on keydown or set their values on click.

function createCookie() {
  var pass = document.getElementById("pass").value;
  var pinCode = document.getElementById("pinCode").value;
  window.alert(pass);
}

Check the snippet.

document.getElementById("pass").addEventListener("keydown", function() {
  document.getElementById("pass").style.backgroundColor = "#DFFEFE";
});
document.getElementById("pinCode").addEventListener("keydown", function() {
  document.getElementById("pinCode").style.backgroundColor = "#DFFEFE";
});

function createCookie() {
  var pass = document.getElementById("pass").value;
  var pinCode = document.getElementById("pinCode").value;
  window.alert(pass);
}

<div id="validation">
  <form id="validationForm">
    <fieldset>
      <label for="pass">Password:</label><br />
      <input type="text" id="pass" name="pass" /><br />
      <label for="pinCode">4-digit PIN:</label><br />
      <input type="text" id="pinCode" name="pinCode" /><br />
      <input type="submit" value="Log In" onclick="createCookie()" />
      <p id="rightorwrong"></p>
    </fieldset>
  </form>
</div>
<script type="text/javascript" src="password.js"></script>

Value of form input is blank in JavaScript

4 Answers4