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 th

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>