フォーム入力を変数に保存しようとしました

Question

私はグーグルで、stackoverflowを見て、例を試してみましたが、まだ難しいです。

目標：ユーザーが都市名を入力できるようにフォームボックスを作成して、変数に取り込んでgoodleジオコードapiから都市lattitueとlongituteを検索することができます。ここで

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