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>

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:

• javascript
• html
• dom

• 3 It's not invisible. It's empty, meaning the input's value attribute is empty. – Drew Kennedy Commented Apr 25, 2017 at 12:51
• You are getting an empty value. Try: console.log('the value is: ' + userInput); so you can see the statement in the console, but you would need to add your HTML to the question so people here can help you. – Koby Douek Commented Apr 25, 2017 at 12:52

2 Answers 2

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>

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>