javascript - API returned information appear 1 sec on CodePen and disappeared. Why? -

you supposed enter zipde 11362, , 'little neck' under city name. 'little neck' appear brife moment there in codepen window , disappear. why?

i think didnt make midstake in code. somehow type api url wrong. don't know. information there. request successful, partially.

my project.

code:

var button=document.getelementbyid('submit');  var zipcode;    /*takes user enters*/  button.addeventlistener('click',getvalue);  function getvalue(){    zipcode=document.getelementbyid('zipcode').value;    getcity();  }  //api request 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>

edit: here, click submit , goes blank.

the form submission trying make request form action, in case, there no action, form reload page.

that's why it's disappearing

you need add :

e.preventdefault(); 

in click event listener must prevent default behavior in order execute code in listener.

function getvalue(e){   e.preventdefault();   zipcode=document.getelementbyid('zipcode').value;   getcity(); } 

var button=document.getelementbyid('submit');  var zipcode;    /*takes user enters*/  button.addeventlistener('click',getvalue);  function getvalue(event){  event.preventdefault();    zipcode=document.getelementbyid('zipcode').value;    getcity();  }  //api request 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>