返されたAPI情報がCodePenで1秒間表示され、消えました。どうして？

Question

あなたは11362のようなzipdeを入力し、City Nameの下に「Little Neck」と表示されるはずです。コードネームのウィンドウには、「リトルネック」のような瞬間が現れて消えます。どうして？

私は自分のコードでミッドステークを作っていないと思います。しかし、私は何とかAPIのURLを間違って入力します。知りません。情報はそこにあります。要求は、部分的には成功しています。

My project.

コード：

var button=document.getElementById('submit'); 
 
var zipcode; 
 

 
/*takes what the user enters*/ 
 
button.addEventListener('click',getValue); 
 
function getValue(){ 
 
    zipcode=document.getElementById('zipcode').value; 
 
    getCity(); 
 
} 
 
//API request to Google Geocode 
 
function getCity(){ 
 
    var req=new XMLHttpRequest; 
 
    req.onreadystatechange=function(){ 
 
    if(this.readyState==4&&this.status==200){ 
 
     var myData=JSON.parse(this.responseText); 
 
     var myCity=myData.results[0].address_components[1].short_name; 
 
     document.getElementById('city').innerHTML=myCity; 
 
    }//if function end 
 
    }//onreadystate function end 
 
    req.open('GET','https://maps.googleapis.com/maps/api/geocode/json?address='+zipcode, true); 
 
    req.send(); 
 
}

<form> 
 
    <input type=text placeholder='zipcode' id='zipcode'></input> 
 
    <input type='submit' id='submit'></input> 
 
</form> 
 

 
<ol> 
 
    <li>City Name: <span id='city'></span></li><br> 
 
    
 
    <li>Temperature(C/F): <span id='temp'></span></li> 
 
    <li>Icon: <span id='icon'></span></li> 
 
    <li>Weather: <span id='weather'></span></li><br> 
 
    <li>Wind: <span id='wind'></span></li> 
 
    <li>Sunrise: <span id='sunrise'></span></li> 
 
    <li>Weather: <span id='sunset'></span></li> 
 
</ol>

編集：ここでは、あなたが提出クリックして、それが空白になります。

Answer 1

フォーム提出はフォームアクションへのリクエストを作成しようとしています。この場合、アクションはないため、フォームはページをリロードします。

それはあなたが追加する必要があり

姿を消している理由です：

e.preventDefault(); 

あなたのイベントリスナーをクリックし、リスナーにあるコードを実行するために、デフォルトの動作を防止しなければなりません。

var button=document.getElementById('submit'); 
 
var zipcode; 
 

 
/*takes what the user enters*/ 
 
button.addEventListener('click',getValue); 
 
function getValue(event){ 
 
event.preventDefault(); 
 
    zipcode=document.getElementById('zipcode').value; 
 
    getCity(); 
 
} 
 
//API request to Google Geocode 
 
function getCity(){ 
 
    var req=new XMLHttpRequest; 
 
    req.onreadystatechange=function(){ 
 
    if(this.readyState==4&&this.status==200){ 
 
     var myData=JSON.parse(this.responseText); 
 
     var myCity=myData.results[0].address_components[1].short_name; 
 
     document.getElementById('city').innerHTML=myCity; 
 
    }//if function end 
 
    }//onreadystate function end 
 
    req.open('GET','https://maps.googleapis.com/maps/api/geocode/json?address='+zipcode, true); 
 
    req.send(); 
 
}

<form> 
 
    <input type=text placeholder='zipcode' id='zipcode'></input> 
 
    <input type='submit' id='submit'></input> 
 
</form> 
 

 
<ol> 
 
    <li>City Name: <span id='city'></span></li><br> 
 
    
 
    <li>Temperature(C/F): <span id='temp'></span></li> 
 
    <li>Icon: <span id='icon'></span></li> 
 
    <li>Weather: <span id='weather'></span></li><br> 
 
    <li>Wind: <span id='wind'></span></li> 
 
    <li>Sunrise: <span id='sunrise'></span></li> 
 
    <li>Weather: <span id='sunset'></span></li> 
 
</ol>

Answer 2

function getValue(e){ 
    e.preventDefault(); 
    zipcode=document.getElementById('zipcode').value; 
    getCity(); 
} 

防止submitボタン

function getValue(e){ 
    e.preventDefault(); 
    zipcode=document.getElementById('zipcode').value; 
    getCity(); 
} 

P.S.のデフォルトの動作ここ

button.addEventListener('click',getValue);、getValueはbuttonイベントclickが発射されたときに呼び出される関数（参照のparamsを取るべきではありません。関数の宣言へのポインタと考える）に参照です。 buttonがclickになると、イベントオブジェクトはのデフォルトでgetValueに渡されます。この関数を定義すると、イベントオブジェクトにparamとしてアクセスできます。あなたはそれを任意のエイリアスを与えることはできますが、送信ボタンのデフォルトの動作では、あなたの関数の本体にyourEventAlias.preventDefault();を追加ないようにしたい場合は、最も一般的なものは、eとevent

function getValue(yourEventAlias) {...}あると。