试图将表单输入保存到变量中

Question

我用谷歌搜索，查看了 stackoverflow 并尝试了示例，但我仍然遇到困难。

目标：创建一个表单框，用户可以在其中输入城市名称，以便我可以在变量中捕获它并使用它从 goodle geocode api 查找城市纬度和经度。

这里是 HTML：

<div>
  <form id="nameForm">
    <input id="cityForm" type="text" >
    <button id="subButton" type="button">Submit</button>
  </form>
</div>

这是我尝试过的代码：

var theTerm = document.getElementById('cityForm').value; console.log(theTerm);

控制台输出什么也没给我。

我剥离了代码并从中删除了天气 api 内容，但基本上我担心如何捕获用户输入和“提交”的城市名称。这是jsfiddle：https://jsfiddle.net/zt28sbo3/1/

Answer 1

您需要等待一个事件（当用户输入了某些内容时）。像这样的东西应该可以工作：

var element = document.getElementById('foo');
element.addEventListener('blur', function () {
  var value = this.value;
  // API request here
});

<input id="foo" />

您还可以收听父表单submit 事件：

var form = document.getElementById('nameForm');
form.addEventListener('submit', function (e) {
  e.preventDefault(); // Prevent normal form submission
  var value = document.getElementById('foo').value;
  console.log(value);
  // API request here
});

<form id="nameForm">
  <input id="foo" />
  <button type="submit">Submit</button>
</form>