CODEWITHSUNDEEP
javascripthtmldom
Limpuls
Limpuls

Reputation: 876

Why is the variable holding the input value always logged as empty?

When I console.log the variable that holds the input value, it logs an empty string. The same thing happens with alert. You can test the code in the console and you will see that the output is really there, but empty.

(function() {
  var button = document.getElementsByTagName("button");
  var userInput = document.getElementById("user_input").value;

  button[0].addEventListener("click", function() {
    console.log(userInput);
  }, false);
})();
<form>
  <input id="user_input" type="text" placeholder="add new task">
  <button type="button">Add</button>
</form>

Screenshot:

enter image description here

Upvotes: 5

Views: 3323

Answers (2)

Sagir Musa Umar
Sagir Musa Umar

Reputation: 96

Repositioning (Defining/moving) the var user_input inside the eventListener also works!

(function() {
  var button = document.getElementsByTagName("button");

button[0].addEventListener("click", function() {
var userInput = document.getElementById("user_input").value; // Get the element and the value all together 
    console.log(userInput); // Log only the Variable
  }, false);
})();
<form>
  <input id="user_input" type="text" placeholder="add new task">
  <button type="button">Add</button>
</form>

Upvotes: 0

Weedoze
Weedoze

Reputation: 13943

You were getting the value when the document is loaded. At this time, the value is empty. You need to get the value inside your click event.

(function() {
  var button = document.getElementsByTagName("button");
  var userInput = document.getElementById("user_input"); // Get only the element.

  button[0].addEventListener("click", function() {
    console.log(userInput.value); // Get the value here.
  }, false);
})();
<form>
  <input id="user_input" type="text" placeholder="add new task">
  <button type="button">Add</button>
</form>

Upvotes: 6

Related Questions