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

by

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>

More Related Contents:

  1. Retrieve the position (X,Y) of an HTML element
  2. How can I tell if a DOM element is visible in the current viewport?
  3. Include another HTML file in a HTML file
  4. Parse an HTML string with JS
  5. jQuery document.createElement equivalent?
  6. Browser detection versus feature detection
  7. How can I count text lines inside an DOM element? Can I?
  8. How to show Page Loading div until the page has finished loading?
  9. Retrieving the text of the selected in element
  10. How do I replace text inside a div element?
  11. Dynamically creating HTML elements using Javascript?
  12. What’s standard behavior when element is clicked? Will it submit the form?
  13. Get element at specified position – JavaScript
  14. Add SVG element to existing SVG using DOM
  15. How to get the HTML for a DOM element in javascript
  16. How to find a parent with a known class in jQuery?
  17. How to iterate through all attributes in an HTML element?
  18. Adding images to an HTML document with JavaScript
  19. HTML Table with vertical rows
  20. Add elements to the DOM given plain text HTML using only pure JavaScript (no jQuery)
  21. Add an element to the DOM with JavaScript
  22. Is it possible to use HTML’s .querySelector() to select by xlink attribute in an SVG?
  23. How to get the title of HTML page with JavaScript?
  24. JQuery html() vs. innerHTML
  25. Accessing the document object of a frame with JavaScript
  26. How to properly unload/destroy a VIDEO element
  27. How can I detect a Scrollbar presence ( using Javascript ) in HTML iFrame?
  28. How to get element by class name
  29. Test if an element can contain text
  30. Replacement for deprecated `keypress` DOM event

Leave a Comment