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:
Advertisement
Answer
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>