試圖表單輸入保存到一個變量

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>