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

IT技术 javascript html dom
2021-03-09 06:37:41

当我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>

截屏：

在此处输入图片说明

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>

其它你可能感兴趣的问题
上一篇通过 canvas.toDataURL 将画布保存为图像会产生黑色矩形 下一篇模板文字和标记模板文字之间的区别？