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

Share Improve this question Follow edited Aug 30, 2020 at 15:26 Sebastian Simon 19.6k88 gold badges6161 silver badges8484 bronze badges asked Apr 25, 2017 at 12:50 LimpulsLimpuls 87411 gold badge2020 silver badges4545 bronze badges 2

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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>