为什么保存输入值的变量总是记录为空？

Question

当我console.log保存输入值的变量时，它记录一个空字符串。同样的事情发生在alert. 您可以在控制台中测试代码，您将看到输出确实存在，但为空。

(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>

截屏：

Answer 1

您在加载文档时获得了该值。此时，该值为空。您需要获取点击事件中的值。

(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>