javascript - API request open method not a function error in Chrome console -

my weather app on code pen

code(sorry if it's much):

var button=document.getelementbyid('submit');  var zipcode;  var lat;  var lng;  var weather;  var iconid;  var temp;    /*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;        lat=mydata.results[0].geometry.location.lat;        lng=mydata.results[0].geometry.location.lng;        document.getelementbyid('lat').innerhtml=lat;        document.getelementbyid('lng').innerhtml=lng;        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();    getweather();  }  //api request dark sky weather  function getweather(){    var request=xmlhttprequest;    request.onreadystatechange=function(){      if(this.readystate==4&&this.status==200){        var myweather=json.parse(this.responsetext);        weather=myweather.currently.summary;        document.getelementbyid('weather').innerhtml=weather;        console.log(myweather);      }//if ends    }//onready end    request.open('get','https://api.darksky.net/forecast/6231bad7d2bf09aa53301a4227b7c1af/'+lat+','+lng, true);    request.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>    <li>latitude: <span id='lat'></span></li>    <li>longitude: <span id='lng'></span></li><br>        <li>temperature(f): <span id='temp'></span></li>    <li>icon: <span id='icon'></span></li>    <li>weather: <span id='weather'></span></li><br>    <li>wind(mph): <span id='wind'></span></li>    <li>sunrise: <span id='sunrise'></span></li>     <li>sunset: <span id='sunset'></span></li>  </ol>

ok here logic of code. enter zipcode , press 'submit', , triggers event listener has callback function 'getvalue', stores zipcode in variable , execute getcity() function, turns zipcode city name , lat , lng.

i not sure put execution of getweather() function uses lat , lng weather conditions. put right after getcity() in getvalue() function definition, i thought leaves no time lat , lng value obtained first api. put in getcity() function definition.

the getcity() function works , turns zipcode city name , lat lng. problem getweather() function should return description 'rainy'.

error in chrome console:

edit: add 'new' keyword. var request= new xmlhttprequest; silly typo. here new error:

!!edit 2: huge discovery: think know why. don't know how fix it. scope! try console.log(lat+' , '+lng); in definition of getweather() function, console says 'undefinedandundefined'. place can longitude , latitude if place console.log inside definition of getcity() function, 1st api converts zipcode entered lat , lng.

the request object needs instantiated. try doing this: var request = new xmlhttprequest();.

edit: need explicitly label request header. request.setrequestheader('access-control-allow-origin', '*');