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

Question

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>

Answer 1

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>