试图表单输入保存到一个变量

Question

我一派，看着计算器和尝试了例子，我仍然有困难。

目标：创建一个表单框，用户可以在其中输入城市名称，以便我可以将其捕获到一个变量中，并使用它从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>